<!DOCTYPE html>
<html lang="en">
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,
   				 width=device-width,initial-scale=1.0" />
		<title>物联网可视化平台</title>
		<link rel="shortcut icon" href="../../image/oss/iot/favicon2.ico" type="image/x-icon">
		<link rel="stylesheet" href="lib/element-ui/index.css">
		<script src="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Cesium.js"></script>
		<link href="https://cesium.com/downloads/cesiumjs/releases/1.83/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
		<script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
            }
        }
    </script>
		<script src="lib/element-ui/vue.min.js"></script>
		<script src="lib/element-ui/index.js"></script>
		<script src="../common/util.js"></script>
		<!--Cesium js文件引入 -->


		<script type="text/javascript" src="./lib/jquery/jquery.min.js"></script>
				
		<script type="text/javascript" src="lib/layer/layer.js"></script>
		
		<link rel="stylesheet" href="lib/spectrum/spectrum.css" />
		<script type="text/javascript" src="lib/spectrum/spectrum.js"></script>
		
		<link rel="stylesheet" href="lib/jquery-ui/jquery-ui.min.css" />
		<script type="text/jscript" src="lib/jquery-ui/jquery-ui.min.js"></script> 
			
		<script type="text/jscript" src="lib/transform/jquery.transform2d.js"></script>
		<script type="text/jscript" src="lib/transform/jquery.transformable.js"></script>
		
		<script type="text/jscript" src="lib/wangEditor/wangEditor.min.js"></script>
<!--		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=kKdujke45DE5elsaLoqIFQDWaVLhFyFU"></script>-->
<!--		<script type="text/javascript" src="js/mapapi.js"></script>-->
		<script type="text/jscript" src="lib/wangEditor/wangEditor.min.js"></script>
		
		<link rel="stylesheet" href="./lib/fontimage/iconfont.css">
		
		<!-- 视频播放 -->
<!--		<script src="https://open.ys7.com/sdk/js/1.3/ezuikit.js"></script>  -->
		<script type="text/javascript" src="../../lib/webUploader/webuploader.min.js"></script>	 
		<script type="text/javascript" src="../../lib/echarts/echarts.min.js"></script>	 
		<script type="text/javascript" src="../../lib/echarts/echarts-liquidfill.min.js"></script>
		<script type="text/javascript" src="js/cfg.js"></script>
		<script type="text/javascript" src="js/webrtcstreamer2.js"></script>
		<script type="text/javascript" src="js/adapter2.min.js"></script>
		<link rel="stylesheet" href="css/cfg.css" /> 
	</head>
	<body>
		<div id="app" style="display: none;">
			<el-container>
				<el-header style="text-align:center ;">
					<div class="layui-logo" style="position:fixed; " >
			          	<span>
			          		<img src="../../image/oss/iot/logo13.png">
			          	</span>
			            <span>物联网可视化平台</span>
			         </div>
			         <div style="cursor:pointer;" @click="visualChange=true" >
			         	<span v-text="visual_name"></span>
			         	<span class="iconfont icon-caret-down"></span>
			         </div>
					<div class="head_btns">
						<div class="head_btn" @click="saveVisual()"> <div class="el-icon-s-order"></div> 保存</div>
						<div class="head_btn" @click="showVisual()"> <div class="el-icon-position "></div> 预览</div>
					</div>
				</el-header>
				<el-container>
					<el-aside width="240px">
						<el-container>
						  <el-aside width="60px" style="background: #4a5053;" class="left-container"  >
								<div class="func-list" @click="changetab(0)" :class="{'active':tabmode==0}" >
									<div class="el-icon-document font-icon"></div>
									<div>基本</div>
								</div>
								<div class="func-list" @click="changetab(1)" :class="{'active':tabmode==1}">
									<div class="el-icon-s-grid font-icon"></div>
									<div>组件</div>
								</div>
								<div class="func-list" @click="changetab(2)" :class="{'active':tabmode==2}">
									<div class="el-icon-picture font-icon"></div>
									<div>图库</div>
								</div>
								<!-- <div class="func-list" @click="changetab(3)" :class="{'active':tabmode==3}">
									<div class="el-icon-setting font-icon"></div>
									<div>基础</div>
								</div> -->
								<div class="func-list" @click="changetab(4)" :class="{'active':tabmode==4}">
									<div class="el-icon-upload font-icon"></div>
									<div>上传</div>
								</div>
						  </el-aside>
						  <el-aside width="180px">
						  		<div class="element-container"  v-show="tabmode==0">
									<div class="ele-node-info" >
										<div class="ele-sub-c">
											<div>
												<span class="intro-ico iconfont icon-wenben"></span>
											</div>
											<div class="intro-txt">
												文本
											</div>
										</div>
										<div class="ele-content">
											<div class="canvas" nid="0">
												<div class="canvas_text">文本</div> 
											</div>
										</div>
									</div>
									
									<div class="ele-node-info" >
										<div class="ele-sub-c" >
											<div>
												<span class="intro-ico iconfont icon-wenbenyu"></span>
											</div>
											<div class="intro-txt">
												高级文本
											</div>
										</div>
										<div class="ele-content">
											<div class="canvas high-txt" nid="3">
												<div >双击编辑文本</div> 
											</div>
										</div>
									</div>
									
									<div class="ele-node-info" >
										<div class="ele-sub-c" >
											<div>
												<span class="intro-ico iconfont icon-chaolianjie"></span>
											</div>
											<div class="intro-txt">
												跳转链接
											</div>
										</div>
										<div class="ele-content">
											<div class="canvas" nid="0">
												<a class="canvas_text" href="#" >跳转链接</a>
											</div>
										</div>
									</div>
									
									<div class="ele-node-info" >
										<div class="ele-sub-c" >
											<div>
												<span class="intro-ico iconfont icon-time"></span>
											</div>
											<div class="intro-txt">
												时间
											</div>
										</div>
										<div class="ele-content">
											<div class="canvas" nid="0" cid="6">
												<span></span>
											</div>
										</div>
									</div>


<!--									<div class="ele-node-info" >-->
<!--										<div class="ele-sub-c">-->
<!--											<div>-->
<!--												<svg t="1732419616060" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1774" width="32" height="32"><path d="M32.071453 831.767214a31.989853 31.989853 0 0 1-11.836245-61.740417l290.147968-116.123167a31.989853 31.989853 0 1 1 23.672492 59.501127C15.756628 840.724373 41.028612 831.767214 32.071453 831.767214zM511.919251 287.939709a31.989853 31.989853 0 0 1-31.989853-31.989853V32.020883a31.989853 31.989853 0 0 1 63.979707 0v223.928973a31.989853 31.989853 0 0 1-31.989854 31.989853zM991.76705 831.767214c-8.957159 0 12.476043 7.357666-301.984215-118.362457a31.989853 31.989853 0 0 1 23.672492-59.501127l290.147968 116.123167A31.989853 31.989853 0 0 1 991.76705 831.767214z" fill="#38004D" p-id="1775"></path><path d="M32.071453 831.767214a31.989853 31.989853 0 0 1-31.989853-31.989853V223.960003a31.989853 31.989853 0 0 1 63.979706 0v575.817358a31.989853 31.989853 0 0 1-31.989853 31.989853z" fill="#38004D" p-id="1776"></path><path d="M511.919251 799.777361a287.908679 287.908679 0 1 1 287.908679-287.908679 287.908679 287.908679 0 0 1-287.908679 287.908679z m0-511.837652a223.928973 223.928973 0 1 0 223.928973 223.928973 223.928973 223.928973 0 0 0-223.928973-223.928973z" fill="#9F85EC" p-id="1777"></path><path d="M991.76705 383.909269a31.989853 31.989853 0 0 0 31.989853-31.989853c0-139.47576 0-130.518601-2.23929-138.835963-6.717869-18.874013 20.153608-3.518884-497.762116-210.813133a31.989853 31.989853 0 0 0-23.672491 0C-13.674037 207.645178 6.799469 194.529338 1.681093 216.602336a19.51381 19.51381 0 0 0 0 14.715333c5.118377 22.392897-15.035231 8.957159 479.847798 206.334553v506.719275L43.907699 770.026797a31.989853 31.989853 0 0 0-41.586809 17.914318 31.989853 31.989853 0 0 0 17.914318 41.586809c526.233085 210.493234 476.009016 189.379931 479.847798 191.939119a31.989853 31.989853 0 0 0 24.952085 0l479.847799-191.939119A31.989853 31.989853 0 0 0 1023.756903 799.777361V479.878828a31.989853 31.989853 0 0 0-63.979706 0v298.145432l-415.868092 166.347237V437.652222l415.868092-166.347237V351.919416a31.989853 31.989853 0 0 0 31.989853 31.989853zM511.919251 66.569925L905.714345 223.960003 511.919251 381.350081 118.124158 223.960003z" fill="#38004D" p-id="1778"></path></svg>-->
<!--											</div>-->
<!--											<div class="intro-txt">-->
<!--												3D容器-->
<!--											</div>-->
<!--										</div>-->
<!--										<div class="ele-content" >-->
<!--											<div  class="canvas" name="canvas3d"  nid="0" cid="100">-->
<!--												<div>3D</div>-->
<!--											</div>-->
<!--										</div>-->
<!--									</div>-->


									
								</div>
								<!-- 组件 -->
								<div class="element-container" v-show="tabmode==1">
									<div class="ele-node-info" >
										<div class="ele-sub-c">
											<div>
												<span class="intro-ico iconfont icon-shuju"></span>
											</div>
											<div class="intro-txt">
												数值数据
											</div>
										</div>
										<div class="ele-content">
											<div class="canvas sensorNode" nid="1" style="font-size: 20px;" >
												<div class="canvas_text">0.00 </div> 
											</div>
										</div>
									</div>
									
									<div class="ele-node-info" >
										<div class="ele-sub-c">
											<div>
												<span class="intro-ico iconfont icon-shuju"></span>
											</div>
											<div class="intro-txt">
												配置数据
											</div>
										</div>
										<div class="ele-content">
											<div class="canvas sensorNode" nid="1" cid="11" style="font-size: 20px;background:#999;color:#fff;padding: 10px;border-radius: 3px;" >
												<div class="canvas_text">0.00 </div>
											</div>
										</div>
									</div>
									
									<div class="ele-node-info" >
										<div class="ele-sub-c">
											<div>
												<span class="intro-ico iconfont icon-share"></span>
											</div>
											<div class="intro-txt">
												状态数据
											</div>
										</div>
										<div class="ele-content">
											<div class="canvas sensorNode" nid="1" cid="7">
												<div class="canvas_text">状态值</div> 
											</div>
										</div>
									</div>
									<div class="ele-node-info" >
										<div class="ele-sub-c" >
											<div>
												<span class="intro-ico iconfont icon-shipin2"></span>
											</div>
											<div class="intro-txt">
												视频
											</div>
										</div>
										<div class="ele-content">
											<div class="canvas videoNode" nid="4" > 
												<div class="video_content"> 
													<video  class="node_video"  poster="" controls="" playsinline="" webkit-playsinline="" autoplay>
<!--														<source src="" type="rtmp/flv">-->
													</video> 
												</div>
											</div>
										</div>
									</div>
									<div class="ele-node-info" >
										<div class="ele-sub-c" >
											<div>
												<span class="intro-ico iconfont icon-shuju1"></span>
											</div>
											<div class="intro-txt">
												图表
											</div>
										</div>
										<div class="ele-content">
											<div class="canvas chartNode" nid="5" cid="1" >
												<div class="chartStyle"></div> 
											</div>
										</div>
									</div>
									<div class="ele-node-info" >
										<div class="ele-sub-c" >
											<div>
												<span class="intro-ico iconfont icon-ditu1"></span>
											</div>
											<div class="intro-txt">
												地图
											</div>
										</div>
										<div class="ele-content">
											<div class="canvas mapNode" nid="6" >
												<div class="mapStyle">
													<img src="image/map.png">
												</div> 
											</div>
										</div>
									</div>
									
									<div class="ele-node-info" >
										<div class="ele-sub-c" >
											<div>
												<span class="intro-ico iconfont icon-zhishideng"></span>
											</div>
											<div class="intro-txt">
												指示灯
											</div>
										</div>
										<div class="ele-content">
											<div class="canvas stateNode" nid="8" 
														cmd="[{'max':'0','min':'0','src':'image/res/state_off.png','send':0},
															{'max':1,'min':1,'src':'image/res/state_on.png','send':0}]" >
												<img src="">
											</div>
										</div>
									</div>
									
									<div class="ele-node-info" >
										<div class="ele-sub-c" >
											<div>
												<span class="intro-ico iconfont icon-kaiguananniu"></span>
											</div>
											<div class="intro-txt">
												按钮
											</div>
										</div>
										<div class="ele-content">
											<div class="canvas controlNode" nid="9" 
															cmd="[{'max':'0','min':'0','src':'image/res/off.png','send':1},
															{'max':1,'min':1,'src':'image/res/on.png','send':0}]">
												<img src="">
											</div>
										</div>
									</div>
									
									<div class="ele-node-info" >
										<div class="ele-sub-c" >
											<div>
												<span class="intro-ico iconfont icon-WIFI"></span>
											</div>
											<div class="intro-txt">
												设备状态
											</div>
										</div>
										<div class="ele-content">
											<div class="canvas deviceStateNode" nid="11"  w="87px" h="64px"
															cmd="[{'max':'19','min':'17','src':'image/res/offline.png','send':0},
															      {'max':16,'min':16,'src':'image/res/online.png','send':0}]">
												<img src="image/res/offline.png">
											</div>
										</div>
									</div>
									
									<div class="ele-node-info" >
										<div class="ele-sub-c" >
											<div>
												<span class="intro-ico iconfont icon-B"></span>
											</div>
											<div class="intro-txt">
												自定义状态
											</div>
										</div>
										<div class="ele-content">
											<div class="canvas stateNode" nid="8" w="80px" h="50px" cmd="[]" >
												<img src="image/res/blank.png">
											</div>
										</div>
									</div>
									
									<div class="ele-node-info" >
										<div class="ele-sub-c" >
											<div>
												<span class="intro-ico iconfont icon-anniu"></span>
											</div>
											<div class="intro-txt">
												自定义按钮
											</div>
										</div>
										<div class="ele-content">
											<div class="canvas controlNode" nid="9"  w="80px" h="50px"
															cmd="[]">
												<img src="image/res/blank.png">
											</div>
										</div>
									</div>
									
									
									<div class="ele-node-info" >
										<div class="ele-sub-c" >
											<div>
												<span class="intro-ico iconfont icon-yewei"></span>
											</div>
											<div class="intro-txt">
												液位图
											</div>
										</div>
										<div class="ele-content">
											<div class="canvas chartNode" nid="5" cid="4" >
												<div class="chartStyle"></div> 
											</div>
										</div>
									</div>
									
									<div class="ele-node-info" >
										<div class="ele-sub-c" >
											<div>
												<span class="intro-ico iconfont icon-guandao"></span>
											</div>
											<div class="intro-txt">
												管道图
											</div>
										</div>
										<div class="ele-content">
											<div class="canvas pipeLineNode" nid="10" cid="10" >
												<div class="chartStyle"></div> 
											</div>
										</div>
									</div>
								</div>
								<!-- 图库 -->
								<div class="element-container imglibrary self-upload" v-show="tabmode==2">
									<el-collapse v-model="activeNameImgKun" accordion  >
									 	 <el-collapse-item title="电力元件" name="-1">
									 	 	<div>
									 	 		<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#BFBFBF" d="M20 40l15-20H5z"></path><path d="M20 0v19" stroke="#BFBFBF" stroke-width="2" stroke-linecap="square"></path></g></svg>
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#BFBFBF" d="M20 40l15-20H5z"></path><path d="M20 0v19" stroke="#BFBFBF" stroke-width="2" stroke-linecap="square"></path></g></svg>
														</div>
													</div>
												</div>
												
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M20 0v19M6 21h28M12 28h16M17 35h6"></path></g></svg>
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px">
															<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M20 0v19M6 21h28M12 28h16M17 35h6"></path></g></svg>
														</div>
													</div>
												</div>
												
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="20" cy="30" r="10"></circle><path d="M20 0v59" stroke-linecap="square"></path></g></svg>
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="60px">
															<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="20" cy="30" r="10"></circle><path d="M20 0v59" stroke-linecap="square"></path></g></svg>
														</div>
													</div>
												</div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="20" cy="30" r="15"></circle><path d="M20 0v15M20 45v15M10 20l20 20M10 40l20-20" stroke-linecap="square"></path></g></svg>
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="60px">
															<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="20" cy="30" r="15"></circle><path d="M20 0v15M20 45v15M10 20l20 20M10 40l20-20" stroke-linecap="square"></path></g></svg>
														</div>
													</div>
												</div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><path d="M20 0v80" stroke-linecap="square"></path><path d="M11 21h18v38H11z"></path></g></svg>
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="80px">
															<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><path d="M20 0v80" stroke-linecap="square"></path><path d="M11 21h18v38H11z"></path></g></svg>
														</div>
													</div>
												</div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><path d="M20 0v38M20 60v20" stroke-linecap="square"></path><path d="M11 21h18v38H11z"></path><path d="M20 48l4-8h-8z"></path></g></svg>
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="80px">
															<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><path d="M20 0v38M20 60v20" stroke-linecap="square"></path><path d="M11 21h18v38H11z"></path><path d="M20 48l4-8h-8z"></path></g></svg>
														</div>
													</div>
												</div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M10 20h20v40H10z"></path></defs><g fill="none" fill-rule="evenodd"><path d="M20 0v20M20 60v20" stroke="#BFBFBF" stroke-width="2" stroke-linecap="square"></path><use fill="#D9D9D9" xlink:href="#a"></use><path stroke="#BFBFBF" stroke-width="2" d="M11 21h18v38H11z"></path></g></svg>
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="80px">
															<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M10 20h20v40H10z"></path></defs><g fill="none" fill-rule="evenodd"><path d="M20 0v20M20 60v20" stroke="#BFBFBF" stroke-width="2" stroke-linecap="square"></path><use fill="#D9D9D9" xlink:href="#a"></use><path stroke="#BFBFBF" stroke-width="2" d="M11 21h18v38H11z"></path></g></svg>
														</div>
													</div>
												</div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><path d="M20 0v20M20 60v20" stroke-linecap="square"></path><path d="M11 21h18v38H11z"></path></g></svg>
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="80px">
															<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><path d="M20 0v20M20 60v20" stroke-linecap="square"></path><path d="M11 21h18v38H11z"></path></g></svg>
														</div>
													</div>
												</div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M20 0v15M20 25v15M10 15h20M10 25h20"></path></g></svg>
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px">
															<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M20 0v15M20 25v15M10 15h20M10 25h20"></path></g></svg>
														</div>
													</div>
												</div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<svg width="60" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M30 0v20M30 60v20M26 16l8 8M5 20l25 40M26 24l8-8"></path></g></svg>
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="60px" h="80px">
															<svg width="60" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M30 0v20M30 60v20M26 16l8 8M5 20l25 40M26 24l8-8"></path></g></svg>
														</div>
													</div>
												</div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><g transform="translate(5)"><path d="M15 0v13" stroke-linecap="square"></path><circle cx="15" cy="28" r="15"></circle><path d="M15 21l6 12H9z"></path></g><g transform="translate(5 38)"><path d="M15 14v28" stroke-linecap="square"></path><circle cx="15" cy="15" r="15"></circle><path d="M15 15l9-13M6 2l9 13" stroke-linecap="square"></path></g></g></svg>
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="80px">
															<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><g transform="translate(5)"><path d="M15 0v13" stroke-linecap="square"></path><circle cx="15" cy="28" r="15"></circle><path d="M15 21l6 12H9z"></path></g><g transform="translate(5 38)"><path d="M15 14v28" stroke-linecap="square"></path><circle cx="15" cy="15" r="15"></circle><path d="M15 15l9-13M6 2l9 13" stroke-linecap="square"></path></g></g></svg>
														</div>
													</div>
												</div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="20" cy="30" r="15"></circle><circle cx="20" cy="50" r="15"></circle><path d="M20 0v15M20 65v15" stroke-linecap="square"></path></g></svg>
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="80px">
															<svg width="40" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="20" cy="30" r="15"></circle><circle cx="20" cy="50" r="15"></circle><path d="M20 0v15M20 65v15" stroke-linecap="square"></path></g></svg>
														</div>
													</div>
												</div>
												<div class="ele-node-info" style="width: 80px;" >
													<div class="ele-sub-c">
														<div>
															<svg width="60" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="30" cy="29" r="15"></circle><circle cx="17" cy="52" r="15"></circle><circle cx="43" cy="52" r="15"></circle><path d="M30 0v13M20 68v12M40 68v12" stroke-linecap="square"></path></g></svg>
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="60px" h="80px">
															<svg width="60" height="80" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd"><circle cx="30" cy="29" r="15"></circle><circle cx="17" cy="52" r="15"></circle><circle cx="43" cy="52" r="15"></circle><path d="M30 0v13M20 68v12M40 68v12" stroke-linecap="square"></path></g></svg>
														</div>
													</div>
												</div>
												<div class="ele-node-info" style="width: 80px;">
													<div class="ele-sub-c">
														<div>
															<svg width="80" height="100" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M39.66 19l-15 25.98M19.66 53.641l-15 25.98M16 39.98l17.32 10M11 48.641l17.32 10"></path><g><path d="M40.5 18.69l15 25.98M60.5 53.33l15 25.98M46.84 49.67l17.32-10M51.84 58.33l17.32-10"></path></g><g><path d="M75 80H45M35 80H5M45 70v20M35 70v20"></path></g><path d="M40 0v19"></path></g></svg>
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="80px" h="100px">
															<svg width="80" height="100" xmlns="http://www.w3.org/2000/svg"><g stroke="#BFBFBF" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M39.66 19l-15 25.98M19.66 53.641l-15 25.98M16 39.98l17.32 10M11 48.641l17.32 10"></path><g><path d="M40.5 18.69l15 25.98M60.5 53.33l15 25.98M46.84 49.67l17.32-10M51.84 58.33l17.32-10"></path></g><g><path d="M75 80H45M35 80H5M45 70v20M35 70v20"></path></g><path d="M40 0v19"></path></g></svg>
														</div>
													</div>
												</div>
									 	 		
									 	 		<!-- 自定义基础图形  -->
									 	 		
									 	 		<div class="ele-node-info" style="width: 80px;" >
													<div class="ele-sub-c">
														<div>
															<svg width="70" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1">
																<line x1="0" y1="10" x2="80" y2="10" stroke="#BFBFBF" stroke-width="2" />
															</svg>
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="9" w="70px" h="20px" >
															<svg width="70" height="20" xmlns="http://www.w3.org/2000/svg" version="1.1">
																<line x1="0" y1="10" x2="80" y2="10" stroke="#BFBFBF" stroke-width="2" />
															</svg>
														</div>
													</div>
												</div>
											
									 	 		<div class="ele-node-info" style="width: 80px;">
													<div class="ele-sub-c">
														<div>
															<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="40" cy="40" r="38" stroke="#BFBFBF" stroke-width="2" fill="#BFBFBF"/> </svg>
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="80px" h="80px" >
															<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="40" cy="40" r="38" stroke="#BFBFBF" stroke-width="2" fill="#BFBFBF"/> </svg>
														</div>
													</div>
												</div>
												
												<div class="ele-node-info" style="width: 80px;">
													<div class="ele-sub-c">
														<div>
															<svg width="70" height="70" xmlns="http://www.w3.org/2000/svg" version="1.1">
																<rect width="80" height="80" stroke="#BFBFBF" stroke-width="2" fill="#BFBFBF" />
															</svg>
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="80px" h="80px" >
															<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg" version="1.1">
																<rect width="80" height="80" stroke="#BFBFBF" stroke-width="2" fill="#BFBFBF" />
															</svg>
														</div>
													</div>
												</div>
												
												<div class="ele-node-info" style="width: 80px;">
													<div class="ele-sub-c">
														<div>
															<svg width="70" height="40" xmlns="http://www.w3.org/2000/svg" version="1.1">
																<rect width="70" height="40" stroke="#BFBFBF" stroke-width="2" fill="#BFBFBF" />
															</svg>
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="70px" h="40px" >
															<svg width="70" height="40" xmlns="http://www.w3.org/2000/svg" version="1.1">
																<rect width="70" height="40" stroke="#BFBFBF" stroke-width="2" fill="#BFBFBF" />
															</svg>
														</div>
													</div>
												</div>
									 	 	</div>
									 	 </el-collapse-item>
										<el-collapse-item title="风机设备" name="-2">
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/1.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/1.svg'" alt="" srcset="">
														</div>
													</div>
												</div>

												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/2.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px">
															<img :src="baseurl+'/image/oss/iot/svgIcon/2.svg'" alt="" srcset="">
														</div>
													</div>
												</div>

												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/3.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="60px">
															<img :src="baseurl+'/image/oss/iot/svgIcon/3.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/4.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="60px">
															<img :src="baseurl+'/image/oss/iot/svgIcon/4.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/5.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="80px">
															<img :src="baseurl+'/image/oss/iot/svgIcon/5.svg'" alt="" srcset="">
														</div>
													</div>
												</div>


											</div>
										</el-collapse-item>
										<el-collapse-item title="隔栏" name="-3">
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/6.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/6.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
										</el-collapse-item>
										<el-collapse-item title="给排水" name="-4">
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/7.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/7.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/8.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/8.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/9.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/9.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/10.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/10.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/11.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/11.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/12.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/12.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/13.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/13.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/14.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/14.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
										</el-collapse-item>
										<el-collapse-item title="管道装置" name="-5">
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/15.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/15.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/16.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/16.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/17.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/17.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/18.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/18.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/19.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/19.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/20.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/20.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/21.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/21.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/22.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/22.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/23.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/23.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/24.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/24.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/25.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/25.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/26.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/26.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/27.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/27.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/28.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/28.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/29.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/29.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/30.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/30.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/31.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/31.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/32.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/32.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/33.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/33.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
										</el-collapse-item>
										<el-collapse-item title="罐体装置" name="-6">
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/34.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/34.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/35.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/35.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
											<div>
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="baseurl+'/image/oss/iot/svgIcon/36.svg'" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="baseurl+'/image/oss/iot/svgIcon/36.svg'" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
										</el-collapse-item>
										<el-collapse-item title="锅炉设备" name="-7" >
											<div v-for="(item,index) in gouduList" :key="index">
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="item" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="item" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>

										</el-collapse-item>
										<el-collapse-item title="计量器" name="-8" >
											<div v-for="(item,index) in jiliangqiList" :key="index">
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="item" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="item" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>

										</el-collapse-item>
										<el-collapse-item title="加热器" name="-9" >
											<div v-for="(item,index) in jiarqiList" :key="index">
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="item" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="item" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>

										</el-collapse-item>
										<el-collapse-item title="接线器" name="-10" >
											<div v-for="(item,index) in jiexianiList" :key="index">
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="item" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="item" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
										</el-collapse-item>
										<el-collapse-item title="冷热源" name="-22" >
											<div v-for="(item,index) in jieleyuanList" :key="index">
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="item" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="item" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
										</el-collapse-item>
										<el-collapse-item title="指示灯" name="-333" >
											<div v-for="(item,index) in zhisdList" :key="index">
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="item" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="item" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
										</el-collapse-item>
										<el-collapse-item title="仪表仪器" name="-334" >
											<div v-for="(item,index) in yibiaoList" :key="index">
												<div class="ele-node-info" >
													<div class="ele-sub-c">
														<div>
															<img :src="item" alt="" srcset="">
														</div>
													</div>
													<div class="ele-content">
														<div class="canvas" nid="2" cid="8" w="40px" h="40px" >
															<img :src="item" alt="" srcset="">
														</div>
													</div>
												</div>
											</div>
										</el-collapse-item>

									 	 <el-collapse-item v-for="(item,index) in visualPartList"  :title="item.name" :name="index">
									 	 	<div class="ele-node-info upload_img_ele" v-for="(sitem,index) in imgObjList"  v-if="item.code ==sitem.moudle_type " >
												<div class="ele-sub-c" >
													<div>
														<img :src="sitem.dis_img" />
													</div>
												</div>
												<div class="ele-content">
													<div class="canvas"  nid="2">
														<div class="canvas_img">
															<img :src="sitem.dis_img" />
														</div> 
													</div>
												</div>
											</div>
									 	 </el-collapse-item>
									 	 
									</el-collapse>
								</div>
								<div class="element-container" v-show="tabmode==3">
									<div>
										
									</div>
								</div>
								<div class="element-container self-upload" style="background:#f5f5f5;" v-show="tabmode==4">
									<div class="ele-node-info upload_img_ele" :id="'upload_img_'+item.id" style="width:54px;" v-for="item in uploadImgs" >
										<div class="ele-sub-c" >
											<div style="position:relative;">
												<img style="width:40px;height:40px;margin: 2px;" :src="item.dis_img" />
												<img :id="item.id" style="width: 10px;height: 10px;" src="./image/delete.png" class="deleteUploadImg" >
											</div>
										</div>
										<div class="ele-content">
											<div class="canvas"  nid="2">
												<div class="canvas_img">
													<img :src="item.dis_img" />
												</div> 
											</div>
										</div>
									</div>
									<div class="uploadBtns">
										<div class="upload_img mr10" id="upload_img"  style="position: fixed;bottom:10px;left:95px;width: 90px;">
								        	<button tag="" class="el-button el-button--primary" >上传底图</button>
										</div> 
									</div> 
								</div>
						  </el-aside>
						</el-container>
					</el-aside>
					<el-container>
					  <el-main style="overflow: auto;">
						  <div style=" margin-right:240px;">
						  	<div id="edit-content-area" style="overflow: auto; ">
							  <div class="edit-container"  >
									<div class="guide" id="guide" ></div>
									<div id="canvas_droppable" class="canvas_droppable" >  
										<!-- 拖动画布 -->
									</div>
							  </div>
						  	</div>
						  </div>
						  <div class="tool-container" style="background: #fff;width: 240px;border-left:1px solid #d9d9d9;">
							  <div>
								  <el-tabs :stretch="true" v-model="activeName" @tab-click="handleClick">
									<el-tab-pane  label="基本设置" name="first">
										<div style="min-height: 400px;padding-bottom: 30px;">
											<div class="tool-title padding">功能设置</div>
											<div style="padding: 10px ;">
												<span class="el-icon-position" title="移动素材" style="font-size: 28px;margin-right: 10px;cursor: pointer;"
															@click="changeMode" :class={activeBorder:!isdrag} ></span>
												<span class="el-icon-rank" title="移动画布" style="font-size: 28px;cursor: pointer;" @click="changeMode" :class={activeBorder:isdrag}> </span>
											</div>
											<div class="functionDetails">
												<span>
													基础设置
												</span>
											</div>
											<!-- 画布操作 -->
											<div v-show="editType==-1">
												<div class="tool-title padding" style="margin-top: 10px;">辅助线</div>
												<div class="functionList padding">
													<div class="auxiliary" :class="{auxiliaryB : guide =='1'}" @click="selectGuideClick"  > </div>
												</div>											
											</div>
											<div v-show="editType==-1">
												<div class="tool-title padding" style="margin-top: 10px;">画布宽</div>
												<div class="functionList padding">
													<input class="input-style" v-model="canvensWidth" @input="canvensWidthChange" style="margin-right: 15px;width: 100px;text-align:left;padding-left: 10px;">
												</div>											
											</div>
											<div v-show="editType==-1">
												<div class="tool-title padding" style="margin-top: 10px;">画布高</div>
												<div class="functionList padding">
													<input class="input-style" v-model="canvensHeight" @input="canvensHeightChange" style="margin-right: 15px;width: 100px;text-align:left;padding-left: 10px;">
												</div>											
											</div>
											<div v-show="editType==-1">
												<div class="tool-title padding" style="margin-top: 10px;">画布颜色</div>
												<div style="padding: 10px;">
													<input id="canvasContainercolor" />
												</div>											
											</div>
											<div v-show="editType==-1">
												<div class="tool-title padding" style="margin-top: 10px;">背景颜色</div>
												<div style="padding: 10px;">
													<input id="backContainercolor" />
												</div>											
											</div>
											<div v-show="editType==-1">
												<div class="tool-title padding" style="margin-top: 10px;">画布背景图片</div>
												<div style="padding:10px;">
													<div>
														<div class="upload_img mr10" id="upload_img_bg"  style="width: 90px;">
												        	<button class="el-button el-button--small el-button--primary" >上传<i class="el-icon-upload el-icon--right"></i></button>
														</div> 
													</div>
													<div style="margin-top: 10px;">
														<button @click="clearBgImg" class="el-button el-button--small el-button--danger" >清空<i class="el-icon-delete el-icon--right"></i></button>
													</div>
												</div>		
											</div>
											<!-- 元素 -->
											<div v-show="editType==0 ">
												<div class="tool-title padding" style="margin-top: 10px;">修改文本</div>
												<div class="functionList padding">
													<textarea class="base_textarea changeInputVal" @input="textInput" v-model="edit_text"></textarea>
												</div>											
											</div>
											<div v-show="editType==0 || editType==1 || editType == 3  ">
												<div class="tool-title " style="padding: 10px;">文本设置</div>
												<div style="padding: 0 10px;">
													<div class="basic_text">
														<select class="basic_text_select changeInput" v-model="fontSize" @change="fontSizeChange" style-name="font-size">
															<option value="">大小&nbsp;&nbsp;(默认)</option>
															<option value="12px">12</option>
															<option value="13px">13</option>
															<option value="14px">14</option>
															<option value="16px">16</option>
															<option value="18px">18</option>
															<option value="20px">20</option>
															<option value="24px">24</option>
															<option value="36px">36</option>
															<option value="48px">48</option>
															<option value="60px">60</option>
															<option value="72px">72</option>
															<option value="84px">84</option>
															<option value="96px">96</option>
															<option value="100px">100</option>
															<option value="200px">200</option>
															<option value="300px">300</option>
														</select>
														<select class="basic_text_select changeInput" v-model="fontFamily" @change="fontFamilyChange" style-name="font-family">
															<option value="">字体&nbsp;&nbsp;(默认)</option>
															<option value="serif">serif</option>
															<option value="Sans-serif">Sans-serif</option>
															<option value="黑体">黑体</option>
															<option value="仿宋">仿宋</option>
															<option value="幼圆">幼圆</option>
															<option value="楷体">楷体</option>
															<option value="隶体">隶体</option>
															<option value="宋体">宋体</option>
															<option value="新宋体">新宋体</option>
															<option value="Microsoft YaHei">微软雅黑</option>
															<option value="华文细黑">华文细黑</option>
															<option value="华文行楷">华文行楷</option>
															<option value="华文彩云">华文彩云</option>
															<option value="华文中宋">华文中宋</option>
															<option value="华文隶书">华文隶书</option>
															<option value="华文新魏">华文新魏</option>
															<option value="方正舒体">方正舒体</option>
															<option value="Arial">Arial</option>
															<option value="Georgia">Georgia</option>
															<option value="Tahoma">Tahoma</option>
															<option value="Verdana">Verdana</option>
															<option value="Monaco">Monaco</option>
															<option value="lcdbq">LCDBQ</option>
														</select>
														<select class="basic_text_select changeInput" v-model="lineHeight" @change="lineHeightChange" style-name="line-height">
															<option value="">行高&nbsp;&nbsp;(默认)</option>
															<option value="0">自适应</option>
															<option value="1">1</option>
															<option value="1.2">1.2</option>
															<option value="1.5">1.5</option>
															<option value="1.75">1.75</option>
															<option value="2">2</option>
															<option value="3">3</option>
															<option value="4">4</option>
															<option value="5">5</option>
														</select>
														<select class="basic_text_select changeInput" v-model="textalign" @change="textAlignChange" style-name="text-align">
															<option  value="">对齐&nbsp;&nbsp;(默认)</option>
															<option selected="selected" value="left">居左</option>
															<option value="center">居中</option>
															<option value="right">居右</option>
														</select>
													</div>
												</div>	
											</div>
											<div v-show="editType==0|| editType==1 || editType == 3 || editType==2 || editType == 5 ">
												<div class="tool-title " style="padding: 10px;">文本样式</div>
												<div style="padding: 0 10px;">
													<div class="basic_text">
														<button class="basic_text_select textStyleBtn" id="basicColor" style-name="color">A</button>
														<button class="basic_text_select textStyleBtn" v-model="fontWeight" @click="fontWeightChange" >B</button>
														<button class="basic_text_select textStyleBtn" v-model="oblique" @click="obliqueChange" >I</button>
														<button class="basic_text_select textStyleBtn" v-model="underline" @click="underlineChange" >U</button>
													</div>
												</div>	
											</div>
											<div v-show="editType==3" >
												<div class="tool-title " style="padding: 10px;">
													高级文本设置
												</div>
												<div style="padding:0 10px;">
													<div class="text_toolbar"></div>
												</div>												
											</div>
											<div v-show="editType==0 || editType == 1 || editType == 3 || editType == 5 || editType == 8 || editType == 9 ">
												<div class="tool-title " style="padding: 10px;">背景颜色</div>
												<div style="padding-left: 10px;">
													<input id="backcolor" />
												</div>	
											</div>
											<div v-show="editType>=0 && editType <= 10 && editType!= 7">
												<div class="tool-title " style="padding: 10px;">旋转</div>
												<div style="padding: 0 10px;overflow: hidden;position: relative;"> 
													<div id="rotate_slide" class="slide_node">
														<div id="rotate_node" class="slide_line"></div>
													</div>
													<input class="slide_size" v-model="rotate" @input="rotateChange" >
												</div>	
											</div>
											<div class="base-form-group" v-show="editType == 10"> 
												<label class="el-form-item__label" style="width: 80px;">流动方向</label>
												<div class="el-form-item__content" style="margin-left: 80px;">
													<select class="el-input__inner" v-model="speed_dir" @change="rotateSpeedChange" style-name="text-align">
														<option selected="selected" value="r">正向</option>
														<option  value="l">反向</option>
													</select>
												</div>
											</div>
											<div v-show="editType == 10">
												<div class="tool-title " style="padding: 10px;">流动速度</div>
												<div style="padding: 0 10px;overflow: hidden;position: relative;"> 
													<div  class="slide_node">
														<div id="rotate_speed" class="slide_line"></div>
													</div>
													<input class="slide_size" v-model="rotate_speed" @input="rotateSpeedChange" >
												</div>	 
											</div>
											<div v-show="editType == 5 && cid == 4 ">
												<div class="tool-title " style="padding: 10px;">液位最大值</div>
												<div style="padding-left: 10px;"> 
													<input class="el-input__inner" v-model="chartMax" placeholder="液位最大值" style="width:75%;"  @input="chartMaxInput">
												</div>	 
											</div>
											<div v-show="editType == 5 && cid == 4 ">
												<div class="tool-title " style="padding: 10px;">边框</div>
												<div style="padding-left: 10px;"> 
													<select class="el-input__inner" v-model="columnVal" @change="changeChartColumn" style="width:75%;">
														<option selected="selected" value="0">无边框</option>
														<option value="1">有边框</option>
													</select>
												</div>	 
											</div>
											<div v-show="editType>=0 && editType <= 11 && editType!= 7">
												<div class="tool-title " style="padding: 10px;">大小</div>
												<div style="padding: 0 10px;">
													<span style="padding-right: 5px;">宽</span>
													<input class="input-style" v-model="canswidth" @input="canswidthChange" style="margin-right: 15px;">
													<span style="padding-right: 5px;">高</span>
													<input class="input-style" v-model="cansheight" @input="cansheightChange">
												</div>	
											</div>
											<div v-show="editType>=0 && editType <= 11 && editType!= 7">
												<div class="tool-title " style="padding: 10px;">位置</div>
												<div style="padding: 0 10px;">
													<span style="padding-right: 5px;">X&nbsp;</span>
													<input class="input-style" v-model="canvensx" @input="canvensxChange" style="margin-right: 15px;">
													<span style="padding-right: 5px;">Y&nbsp;</span>
													<input class="input-style" v-model="canvensy" @input="canvensyChange">
												</div>	
											</div>
											
											<div v-show="editType == 2 || editType == 9 || editType == 8 || editType == 11 " >
												<div class="tool-title " style="padding: 10px;">图片显示</div>
												<div style="padding: 0 10px;">
													<button @click="imgScale(0)" class="el-button el-button--small el-button--primary" >原比例</button>
													<button @click="imgScale(1)" class="el-button el-button--small el-button--primary" >缩放</button>
												</div>	
											</div>
											
										</div>
									</el-tab-pane>
									<el-tab-pane  label="数据绑定" name="second">
										<div class="nodeConfig" v-show="editType==0|| editType ==1 || editType==4 ||editType==5 
																		||editType==6 || nid==8 || nid==9 || nid==10 || nid==11 || nid==100">
											
											<div class="functionDetails" v-show="nid==0 && cid!= 6">
												<span>
													事件绑定
												</span>
											</div>
											
											<div class="form-group padding" v-show="nid==0 && cid!= 6&& cid!= 100">
												<div class="el-form-item">
													<label class="el-form-item__label" style="width: 80px;">跳转方式</label>
													<div class="el-form-item__content" style="margin-left: 80px;">
														<el-select v-model="jty" placeholder="请选择类型" @change="jumptype" >
															<el-option :value="1" label="弹窗展示"></el-option>
															<el-option :value="2" label="外链跳转"></el-option>
															<el-option :value="3" label="组态内跳转"></el-option>
													    </el-select>
													</div>
												</div>
											</div>
											<div class="form-group padding" v-show="nid==0 && cid== 100">
												<div class="el-form-item">
													<label class="el-form-item__label" style="width: 80px;">选择资源</label>
													<div class="el-form-item__content" style="margin-left: 80px;">
														<el-select v-model="jty" placeholder="请选择类型" @change="change3D" >
															<el-option :value="1" label="1"></el-option>
															<el-option :value="2" label="2"></el-option>
															<el-option :value="3" label="3"></el-option>
														</el-select>
													</div>
												</div>
											</div>
											<div class="functionDetails" v-show="nid==8 || nid==9">
												<span>
													功能设置
												</span>
											</div>
											
											<div class="form-group padding" v-show="nid==8 || nid==9"> 
												<div class="el-form-item">
													<div class="el-form-item__content" >
														<label class="el-form-item__label" style="width: 80px;">功能设置</label>
														<div class="el-form-item__content" style="margin-left: 80px;text-align: center;">
															<el-button type="primary" @click="funcedit" icon="el-icon-edit" circle></el-button>
														</div>
													</div>
												</div>
											</div>
											
											<div class="form-group padding" v-show="nid==0 && cid!= 6 && jty != 3&& cid!= 100">
												<div class="el-form-item">
													<label class="el-form-item__label" style="width: 80px;">跳转地址</label>
													<div class="el-form-item__content" style="margin-left: 80px;">
														<input class="el-input__inner" type="textarea" v-model="jurl" placeholder="http://地址" @input="urlInput">
													</div>
												</div>
											</div>
											
											<div class="form-group padding" v-show="jty == 3"> 
												<div class="el-form-item">
													<label class="el-form-item__label" style="width: 80px;">跳转地址</label>
													<div class="el-form-item__content" style="margin-left: 80px;">
														<el-select v-model="visual_select_code"  placeholder="请选择类型" @change="urlInputSelect"  >
															<el-option
															      v-for="item in visualList"
															      :key="item.keycode"
															      :label="item.name"
															      :value="item.keycode">
														    </el-option>
													    </el-select>
													</div>
												</div>
											</div>
											
											<div class="functionDetails" v-show="nid==5 && cid != 4 ">
												<span>
													图表设置
												</span>
											</div>
											
											<div class="form-group sensorSelect padding" v-show="nid==5 && cid != 4 "> 
												<div class="el-form-item">
													<label class="el-form-item__label" style="width: 80px;">图表类型</label>
													<div class="el-form-item__content" style="margin-left: 80px;">
														<!--  
														<select class="el-input__inner" v-model="cid" @change="changeChartData">
															<option value="">请选择</option>
															<option value="1">折线图</option>
															<option value="2">柱形图</option>
															<option value="3">仪表盘</option>
														</select>
														-->
														<el-select v-model="cid" placeholder="请选择类型" @change="changeChartData" >
															<el-option :value="1" label="折线图"></el-option>
															<el-option :value="2" label="柱形图"></el-option>
															<el-option :value="3" label="仪表盘"></el-option>
													    </el-select>
													</div>
												</div>
											</div>
											
											<div class="form-group padding" v-show="nid==5 && cid == 3 "> 
												<div class="el-form-item">
													<label class="el-form-item__label" style="width: 80px;">量程值</label>
													<div class="el-form-item__content" style="margin-left: 80px;">
														<input class="el-input__inner" v-model="pimax" placeholder="设置范围最大值" @input="settingmaxvalue" >
													</div>
												</div>
											</div>
											
											<div class="functionDetails" v-show="nid==6 || nid==5 || nid==4 || nid==1 || nid==8 || nid==9 || nid==10 || nid==11 ">
												<span>
													数据源
												</span>
											</div>
											
											<div class="form-group videoSelect padding" v-show="nid==6 || nid==5 || nid==1 || nid==8 || nid==9 || nid==10 || nid==11">  
												<div class="el-form-item">
													<label class="el-form-item__label" style="width: 80px;">设备</label>
													<div class="el-form-item__content" style="margin-left: 80px;">
														<el-select v-model="node_id" placeholder="请选择" @change="changeNodeData" >
															<el-option
															      v-for="item in nodeList"
															      :key="parseInt(item.id)"
															      :label="item.name"
															      :value="parseInt(item.id)">
														    </el-option>
													    </el-select>
													</div>
												</div> 
											</div>
											
											<div class="form-group sensorSelect padding" v-show=" nid==1 || nid==5 || nid==8 || nid==9 || nid==10 "> 
												<div class="el-form-item">
													<label class="el-form-item__label" style="width: 80px;">属性</label>
													<!--  
													<div class="el-form-item__content" style="margin-left: 80px;">
														<select  class="el-input__inner" v-model="sensor_id" @change="changeSensorData">
															<option value="">请选择</option>
															<option v-for="(item,index) in sensorList" :value="item.id" >{{item.name}}</option>
														</select>
													</div>
													-->
													<div class="el-form-item__content" style="margin-left: 80px;">
														<el-select v-model="sensor_id" placeholder="请选择" @change="changeSensorData" >
															<el-option
															      v-for="item in sensorList"
															      :key="parseInt(item.id)"
															      :label="item.name"
															      :value="parseInt(item.id)">
														    </el-option>
													    </el-select>
													 </div>
												</div>
											</div>
											
											<div class="form-group videoSelect padding" v-show="nid==4">  
												<div class="el-form-item">
													<label class="el-form-item__label" style="width: 80px;">摄像头</label>
													<div class="el-form-item__content" style="margin-left: 80px;">
														<!--  
														<select  class="el-input__inner"  v-model="video_id" @change="changeVideoData">
															<option value="">请选择</option>
															<option  v-for="(item,index) in videoList" :value="item.id" >{{item.name}}</option>
														</select> 
														-->
														<el-select v-model="video_Info" placeholder="请选择" @change="changeVideoData" >
															<el-option
															      v-for="item in videoList"
															      :key="parseInt(item.id)"
															      :label="item.name"
															      :value="item.rtmp_url_common">
														    </el-option>
													    </el-select>
													</div>
												</div> 
											</div>
										</div>
									</el-tab-pane>
								  </el-tabs>
							  </div>
						  </div>
						  
						  <!-- 右键菜单 -->
						<div id="opration" class="opration" style="display:none;">
							<div class="canvas-con-operates"><!-- 组合框操作按钮 -->
								<div title="左对齐" class="canvas-con-operate dir_operate" tag="3">
									<span class="iconfont icon-left"></span>
								</div>
								<div title="上对齐" class="canvas-con-operate dir_operate" tag="0">
									<span class="iconfont icon-up"></span>
								</div>
								<div title="右对齐" class="canvas-con-operate dir_operate" tag="1">
									<span class="iconfont icon-right"></span>
								</div>
								<div title="下对齐" class="canvas-con-operate dir_operate" tag="2">
									<span class="iconfont icon-down"></span> 
								</div>
							</div>
							<div class="opration_item item_bt" id="copyNode">复制</div>
							<div class="opration_item " id="upMoveOne">上移一层</div>
							<div class="opration_item item_bt" id="downMoveOne">下移一层</div>
							<div class="opration_item item_bt" id="upMoveAll">置于顶层</div>
							<div class="opration_item item_bt" id="downMoveAll">置于底层</div>
							<div class="opration_item" id="deleteNode">删除</div> 
						</div>
						<div id="oprationEdit" class="opration" style="display:none;">
							<div class="opration_item item_disabled" id="pasteNode">粘贴</div> 
						</div>
						  
					  </el-main>
					</el-container>
			  </el-container>
			</el-container>
			
			<el-dialog title="功能设置" :visible.sync="dialogTableVisible">
				<div class="imageDiv">
					<table class="el-table__header-wrapper">
						<thead class="lpro-thead">
							<tr>
								<td>最小值(>=)</td>
								<td>最大值(&lt;)</td>
								<td>图片</td>
								<td>发送值</td>
								<td>操作</td>
							</tr>
						</thead>
						<tbody class="has-gutter">
							<tr :model="item" v-for="(item,index) in dattribute" :key="index" >
								<td>
									<el-input v-model="item.min" placeholder="最小值"></el-input>
								</td>
								<td>
									<el-input v-model="item.max" placeholder="最大值"></el-input>
								</td>
								<td>
									<img style="vertical-align: middle;width:50px;"  :src="item.src">
									<el-button type="success" @click="showImageSelect(index)" style="margin-left:2px;" size="small"  icon="el-icon-search" circle></el-button>
								</td>
								<td>
									<el-input v-model="item.send" placeholder="发送值"></el-input>
								</td>
								<td>
									<el-button type="danger" icon="el-icon-delete" size="small" @click="deleteImageSelect(index)" circle></el-button>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<span slot="footer" class="dialog-footer">
				    <el-button @click="dialogTableVisible = false">取 消</el-button>
				    <el-button type="primary" @click="addImageState">增加</el-button>
				    <el-button type="primary" @click="saveEdit">确 定</el-button>
				</span>
			</el-dialog>
			
			<el-dialog title="图片列表" :visible.sync="dialogImageVisible">
				<div class="imageDiv">
				    <el-collapse v-model="activeNameImgKun2" accordion  >
					 	 <el-collapse-item v-for="(item,index) in visualPartList"  :title="item.name" :name="index">
					 	 	<div class="ele-node-info upload_img_ele" v-for="(sitem,index) in imgObjList" style="width:46px;"  v-if="item.code ==sitem.moudle_type " >
								<img class="upload-img-icon" @click="selectImg(sitem.dis_img)" :src="sitem.dis_img">
							</div>
					 	 </el-collapse-item>
					 	 
					 	 <el-collapse-item title="自定义图片" name="0">
					 	 	<img v-for="item in uploadImgs" class="upload-img-icon" @click="selectImg(item.dis_img)" :src="item.dis_img">
					 	 </el-collapse-item>
					</el-collapse>
				</div>
				
				<span slot="footer" class="dialog-footer">
				    <el-button @click="dialogImageVisible = false">取 消</el-button>
				    <el-button type="primary" @click="dialogImageVisible = false">确 定</el-button>
				</span>
			</el-dialog>
			
			<el-dialog title="组态切换" :visible.sync="visualChange">
				<div>
					<el-row :gutter="12">
  						<el-col :span="8" v-for="item in visualList " style="margin-bottom:3px;" >
							 <el-card shadow="hover" >
							      	<span style="cursor: pointer;color:#47a2ff;"  @click="modifyInfo(item.id)" >{{item.name}}</span>
							      	<el-button @click="deleteVisual(item.id)" style="float:right;"  size="mini" type="danger" icon="el-icon-delete" circle></el-button>
							      	<el-tooltip class="item" effect="dark" content="切换" placement="top">
								      	<el-button @click="changeVisual(item.keycode)" style="float:right;margin-right:10px;" size="mini" type="success" icon="el-icon-position" circle></el-button>
							      	</el-tooltip>
							 </el-card>
						</el-col>
					</el-row>
					<el-row :gutter="12" :span="16" v-show="addColumn" >
						<el-col :span="10" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);margin:10px;" >
							<el-form ref="form" :model="form" label-width="50px" style="margin-top:10px;" >
								<el-form-item label="名称">
							    	<el-input placeholder="请输入名称" v-model="form.name" clearable></el-input>
							  	</el-form-item>
							  	<el-form-item label="排序">
							    	<el-input type="number" placeholder="请输入排序" v-model="form.seq"></el-input>
							  	</el-form-item>
							  	<el-form-item>
								    <el-button type="primary" @click="onSubmit">立即保存</el-button>
								    <el-button @click="addColumn=false">取消</el-button>
								</el-form-item>
							</el-form>
						</el-col>
					</el-row>
				</div>
				
				<span slot="footer" class="dialog-footer">
				    <el-button @click="visualChange = false">取 消</el-button>
				    <el-button type="primary" @click="addnew">新增</el-button>
				    <el-button type="primary" @click="visualChange = false">确 定</el-button>
				</span>
			</el-dialog>
			
		</div>
	</body>

    <script type="text/javascript">

		// 默认加载
    	layer.load();
    	var id = getQueryString('mainid') ;
    	
    	var keyCode = getQueryString('keyCode') ;
    	
		var app = new Vue({
    		el:"#app",
			data:function(){
				return {
					gouduList:[
						baseurl +"/image/oss/iot/svgIcon/37.svg",
						baseurl +"/image/oss/iot/svgIcon/38.svg",
						baseurl +"/image/oss/iot/svgIcon/39.svg",
						baseurl +"/image/oss/iot/svgIcon/40.svg",
						baseurl +"/image/oss/iot/svgIcon/41.svg",
						baseurl +"/image/oss/iot/svgIcon/42.svg",
						baseurl +"/image/oss/iot/svgIcon/43.svg",
						baseurl +"/image/oss/iot/svgIcon/44.svg",
						baseurl +"/image/oss/iot/svgIcon/45.svg",
						baseurl +"/image/oss/iot/svgIcon/46.svg",
						baseurl +"/image/oss/iot/svgIcon/47.svg",
						baseurl +"/image/oss/iot/svgIcon/48.svg",
						baseurl +"/image/oss/iot/svgIcon/49.svg",
						baseurl +"/image/oss/iot/svgIcon/50.svg",
						baseurl +"/image/oss/iot/svgIcon/51.svg",
						baseurl +"/image/oss/iot/svgIcon/52.svg",
						baseurl +"/image/oss/iot/svgIcon/53.svg",
						baseurl +"/image/oss/iot/svgIcon/54.svg",
						baseurl +"/image/oss/iot/svgIcon/55.svg",
						baseurl +"/image/oss/iot/svgIcon/56.svg",
						baseurl +"/image/oss/iot/svgIcon/57.svg",
						baseurl +"/image/oss/iot/svgIcon/58.svg",
						baseurl +"/image/oss/iot/svgIcon/59.svg",
						baseurl +"/image/oss/iot/svgIcon/60.svg",
						baseurl +"/image/oss/iot/svgIcon/61.svg",
						baseurl +"/image/oss/iot/svgIcon/62.svg",
						baseurl +"/image/oss/iot/svgIcon/63.svg",
						baseurl +"/image/oss/iot/svgIcon/64.svg",
						baseurl +"/image/oss/iot/svgIcon/65.svg",
						baseurl +"/image/oss/iot/svgIcon/66.svg",
					],
					jiliangqiList:[
						baseurl +"/image/oss/iot/svgIcon/67.svg",
						baseurl +"/image/oss/iot/svgIcon/68.svg",
						baseurl +"/image/oss/iot/svgIcon/69.svg",
						baseurl +"/image/oss/iot/svgIcon/70.svg",
						baseurl +"/image/oss/iot/svgIcon/71.svg",
						baseurl +"/image/oss/iot/svgIcon/72.svg",
						baseurl +"/image/oss/iot/svgIcon/73.svg",
						baseurl +"/image/oss/iot/svgIcon/74.svg",
						baseurl +"/image/oss/iot/svgIcon/75.svg",
						baseurl +"/image/oss/iot/svgIcon/76.svg",
						baseurl +"/image/oss/iot/svgIcon/77.svg",
						baseurl +"/image/oss/iot/svgIcon/78.svg",
						baseurl +"/image/oss/iot/svgIcon/79.svg",
					],
					jiarqiList:[
						baseurl +"/image/oss/iot/svgIcon/80.svg",
						baseurl +"/image/oss/iot/svgIcon/81.svg",
						baseurl +"/image/oss/iot/svgIcon/82.svg",
						baseurl +"/image/oss/iot/svgIcon/83.svg",
						baseurl +"/image/oss/iot/svgIcon/84.svg",
						baseurl +"/image/oss/iot/svgIcon/85.svg",
						baseurl +"/image/oss/iot/svgIcon/86.svg",
						baseurl +"/image/oss/iot/svgIcon/87.svg",
						baseurl +"/image/oss/iot/svgIcon/88.svg",
						baseurl +"/image/oss/iot/svgIcon/89.svg",
						baseurl +"/image/oss/iot/svgIcon/90.svg",
						baseurl +"/image/oss/iot/svgIcon/91.svg",
						baseurl +"/image/oss/iot/svgIcon/92.svg",
						baseurl +"/image/oss/iot/svgIcon/93.svg",
						baseurl +"/image/oss/iot/svgIcon/94.svg",
						baseurl +"/image/oss/iot/svgIcon/95.svg",
					],
					jiexianiList:[
						baseurl +"/image/oss/iot/svgIcon2/1.svg",
						baseurl +"/image/oss/iot/svgIcon2/2.svg",
						baseurl +"/image/oss/iot/svgIcon2/3.svg",
						baseurl +"/image/oss/iot/svgIcon2/4.svg",
						baseurl +"/image/oss/iot/svgIcon2/5.svg",
						baseurl +"/image/oss/iot/svgIcon2/6.svg",
						baseurl +"/image/oss/iot/svgIcon2/7.svg",
						baseurl +"/image/oss/iot/svgIcon2/8.svg",
						baseurl +"/image/oss/iot/svgIcon2/9.svg",
						baseurl +"/image/oss/iot/svgIcon2/10.svg",
						baseurl +"/image/oss/iot/svgIcon2/11.svg",
						baseurl +"/image/oss/iot/svgIcon2/12.svg",
						baseurl +"/image/oss/iot/svgIcon2/13.svg",
						baseurl +"/image/oss/iot/svgIcon2/14.svg",
						baseurl +"/image/oss/iot/svgIcon2/15.svg",
					],
					jieleyuanList:[
						baseurl +"/image/oss/iot/svgIcon2/16.svg",
						baseurl +"/image/oss/iot/svgIcon2/17.svg",
						baseurl +"/image/oss/iot/svgIcon2/18.svg",
						baseurl +"/image/oss/iot/svgIcon2/19.svg",
						baseurl +"/image/oss/iot/svgIcon2/20.svg",
						baseurl +"/image/oss/iot/svgIcon2/21.svg",
					],
					zhisdList:[
						baseurl +"/image/oss/iot/svgIcon2/22.svg",
						baseurl +"/image/oss/iot/svgIcon2/23.svg",
						baseurl +"/image/oss/iot/svgIcon2/24.svg",
						baseurl +"/image/oss/iot/svgIcon2/25.svg",
						baseurl +"/image/oss/iot/svgIcon2/26.svg",
						baseurl +"/image/oss/iot/svgIcon2/27.svg",
						baseurl +"/image/oss/iot/svgIcon2/28.svg",
						baseurl +"/image/oss/iot/svgIcon2/29.svg",
						baseurl +"/image/oss/iot/svgIcon2/30.svg",
						baseurl +"/image/oss/iot/svgIcon2/31.svg",
						baseurl +"/image/oss/iot/svgIcon2/32.svg",
						baseurl +"/image/oss/iot/svgIcon2/33.svg",
					],
					yibiaoList:[
						baseurl +"/image/oss/iot/svgIcon2/34.svg",
						baseurl +"/image/oss/iot/svgIcon2/35.svg",
						baseurl +"/image/oss/iot/svgIcon2/36.svg",
						baseurl +"/image/oss/iot/svgIcon2/37.svg",
						baseurl +"/image/oss/iot/svgIcon2/38.svg",
						baseurl +"/image/oss/iot/svgIcon2/39.svg",
						baseurl +"/image/oss/iot/svgIcon2/40.svg",
					],
					activeName: 'first' , 		// x选项卡
					activeNameImgKun: 0 ,     // 图库系统
					activeNameImgKun2: 0 ,
					editType : '-1',
					form: {
						name: '' ,
						seq:''
					} ,
					edit_text: '',
					fontSize:'',
					fontFamily:'',
					lineHeight:'',
					textalign: '',
					fontWeight:'0',
					oblique:'0',
					underline:'0',
					rotate:'0',
					rotate_speed:'0',//液体流动速度
					speed_dir:'r',   //液体流动方向
					canswidth:'0',
					cansheight:'0',
					canvensx:'0',
					canvensy:'0',
					guide:1,
					canvensWidth:'',
					canvensHeight:'',
					isdrag:false,
					tabmode:0,
					uploadImgs:[],   // 上传的图标列表
					initUpload:'',
					uploadImgCount:0,
					sensorMap:{},
					videoMap:{},
					nid:'',		//当前选择对象n类型
					videoList:[],
					sensorList:[],
					nodeList:[],
					sceneList:[] ,
					visualList: [] ,
					sensor_id:'',
					node_id:'',		 // 设备id
					scene_id : ''  ,  // 场景id
					cid:'',
					video_id:'',
					video_Info:'',
					bdMap:{}, //节点id-map对象
					chartMap:{} , //节点id-chart对象
					jty: ''  ,  // 跳转方式
					jurl: '' ,  // 跳转url
					dialogTableVisible: false  ,  // 弹窗显示
					visualChange: false ,  		 // 组态切换
					dattribute: []  ,   		// 设备配置属性
					dialogImageVisible: false ,   // 图标列表
					tableIndex: '' , 		// 属性设置页面
					visualPartList: '' ,    // 虚拟组件
					imgObjList:'' ,        // 组件图片列表
					chartMax: '' ,         // 图标最大值
					columnVal: '0' ,	   // 栏目值
					pimax: '' ,			   // 仪表盘最大值
					visual_name : '' ,     // 组态名称
					addColumn: false ,
					visual_select_code: '' , // 组态内跳转
					module:""
				};
			},

			methods:{



				handleChange(){
					var that = this;
					commonAjax('POST',baseurl+'/service/page/moudle/visual?paged=1&pageSize=1999' , {} ,
						function (e) {
                    	 if(isOK(e)){
                            that.imgObjList = e.data.data ;
                            setTimeout(function(){
								cfg.activeMenuNode($(".upload_img_ele"));
							}, 500); 
                         }
                    }) ;
				},
				handleClick(tab, event) {
					
				},
				changeVisual(a){
					window.location.href = baseurl+"/page/visual/index.html?keyCode="+a +"&mainid="+ id ;
				},
				addnew(){
					this.addColumn = true ;
					this.form.name = '' ;
                    this.form.seq = '' ;
                    this.form.keycode = null ;
				},
				deleteVisual(rid){
					var that = this ;
					this.$confirm('确认删除？')
			          .then(_ => {
			        	  commonAjax("DELETE",baseurl+"/service/visual/display?id="+rid, "",function(){
			        	  		// 重新查询一下
	                            that.initVisualListInfo({id: id}) ;
							});
			          })
			          .catch(_ => {
			          });
				},
				modifyInfo(id){
					this.addColumn=true ;
					for(var i =0  ; i< this.visualList.length;i++ ){
						if( this.visualList[i].id == id ){
							this.form.name =  this.visualList[i].name ;
							this.form.seq = this.visualList[i].seq ;
							this.form.keycode = this.visualList[i].keycode  ;
						}
					}
				},

				onSubmit(){
					// 提交
					var that = this ;
					if( this.form.keycode == null ){
						this.form.parent_id = id ;
						this.form.scene_id = this.visualList[0].scene_id ;
						this.form.node_id = this.visualList[0].node_id ;
						this.form.dis_type = this.visualList[0].dis_type ;
						commonAjax('POST',baseurl+'/service/visual/display.json' , this.form ,
							function (e) {
	                    	 if(isOK(e)){
	                            that.addColumn = false ;
	                            that.form.name = '' ;
	                            that.form.seq = '' ;
	                            // 重新查询一下
	                            that.initVisualListInfo({id: id}) ;
	                         }
	                    }) ;
					}else{
						commonAjax('PUT',baseurl+'/service/visual/display.json' , this.form ,
							function (e) {
	                    	 if(isOK(e)){
	                            that.addColumn = false ;
	                            that.form.name = '' ;
	                            that.form.seq = '' ;
	                            // 重新查询一下
	                            that.initVisualListInfo({id: id}) ;
	                         }
	                    }) ;
					}
				},
				textInput(){
					// 文本输入
					$(cfg.current_edit_obj).find(".canvas_text").html(this.edit_text);
				},
			
				fontSizeChange(){
					if(this.fontSize!=''){
						$(cfg.current_edit_obj).css("font-size",this.fontSize );
					}else{
						$(cfg.current_edit_obj).css("font-size",'' ) ;
					}
				},
				fontFamilyChange(){
					if(this.fontFamily !=''){
						$(cfg.current_edit_obj).css("font-family",this.fontFamily );
					}else{
						$(cfg.current_edit_obj).css("font-family",'' ) ;
					}
				},
				lineHeightChange(){
					if(this.lineHeight !=''){
						$(cfg.current_edit_obj).css("line-height",this.lineHeight );
					}else{
						$(cfg.current_edit_obj).css("line-height",'' ) ;
					}
				},
				textAlignChange(){
					if(this.textalign !=''){
						$(cfg.current_edit_obj).css("text-align",this.textalign );
					}else{
						$(cfg.current_edit_obj).css("text-align",'' ) ;
					}
				},
				fontWeightChange(){
					if($(cfg.current_edit_obj).css("font-weight") == 700){
						$(cfg.current_edit_obj).css("font-weight",'400' ) ;
					}else{
						$(cfg.current_edit_obj).css("font-weight",'700' ) ;
					}
				},
				obliqueChange(){
					if($(cfg.current_edit_obj).css("font-style") != 'italic'){
						$(cfg.current_edit_obj).css("font-style",'italic' ) ;
					}else{
						$(cfg.current_edit_obj).css("font-style",'normal' ) ;
					}
				},
				underlineChange(){
					if($(cfg.current_edit_obj).css("text-decoration").indexOf('none')>-1){
						$(cfg.current_edit_obj).css("text-decoration",'underline' ) ;
					}else{
						$(cfg.current_edit_obj).css("text-decoration",'none' ) ;
					}
				},
				rotateChange(){
					var size = app.rotate  ;
					var cosVal = Math.cos(size * Math.PI / 180);
					var sinVal = Math.sin(size * Math.PI / 180);
					var valTransform = 'matrix('+ cosVal.toFixed(6) +','+ sinVal.toFixed(6) +','+ (-1 * sinVal).toFixed(6) +','+ cosVal.toFixed(6) +',0,0)';
					$(cfg.current_edit_obj).css("transform","rotate("+size+"deg)");
					// 重置滑块
					$("#rotate_node").slider({
						value:size,
					});
				},
				rotateSpeedChange(){
					var size = app.rotate_speed  ;
					resetPipelineChartSpeedAndDir(size);
					// 重置滑块
					$("#rotate_speed").slider({
						value:size, 
					});
				},
				canswidthChange(){
					$(cfg.current_edit_obj).css("width",this.canswidth);
				},
				cansheightChange(){
					$(cfg.current_edit_obj).css("height",this.cansheight);
				},
				canvensxChange(){
					$(cfg.current_edit_obj).css("left",this.canvensx+"px");
				},
				canvensyChange(){
					$(cfg.current_edit_obj).css("top",this.canvensy+"px");
				},
				selectGuideClick(event){
					if( this.guide == 1){
						this.guide = 0 ;
						$(".guide").hide();
					}else{
						this.guide =1 ;
						$(".guide").show();
					}
				},
				changeMode(){
					if(this.isdrag){
						this.isdrag=false ;
						$(".canvas_droppable").hide();
					}else{ 
						this.isdrag =true ;
						$(".canvas_droppable").show();
					} 
				},
				canvensWidthChange(){
					// 宽度变化
					$(".edit-container").css("width",this.canvensWidth+"px");
				},
				canvensHeightChange(){
					// 高度变化
					$(".edit-container").css("height",this.canvensHeight+"px");
				},
				changetab(a){
					this.tabmode = a ;
					if(this.initUpload != 1 && a == 4){
						initImgUpload("upload_img");
						this.initUpload = 1;
					}
				},
				addUploadImg(obj,id){
					var uploadImgCount = this.uploadImgCount;
					this.uploadImgs.push({ dis_img:obj,id: id });
				},
				deleteImageSelect(index){
					this.dattribute.splice(index,1);
				},
				saveEdit(){
					cfg.current_edit_obj.attr("cmd", JSON.stringify( this.dattribute ) );
					this.dialogTableVisible = false ;
					
					initControllerPart(cfg.current_edit_obj);
				},
				addImageState(){
					// 增加一行
					this.dattribute.push({max:0 , min:0, src:'image/res/blank.png', send:0 });
					
				},
				selectImg(obj){
					this.dialogImageVisible=false ;
					this.dattribute[ this.tableIndex ].src = obj ;
				},
				changeChartData(){	//修改图表类型选择框
					var cid = this.cid;
					cfg.current_edit_obj.attr("cid",cid);
					resetNodeData();
				},
				settingmaxvalue(){
					// 设置最大值
					var cl = cfg.current_edit_obj ;
					var optn = cl.children(".chartStyle").attr("option"); 
					var optnj = eval("("+ optn +")");
					optnj.series[0].max = gdv(this.pimax ,100 ) ;
					var chart = getEchartObj();
					setChartOption(chart,optnj);
				},
				changeSceneData(){	// 修改项目选择框
					this.initNodeList();				
					this.initVideoList() ;
				},
				showImageSelect(index){
					this.dialogImageVisible = true ;
					this.tableIndex = index ;
				},
				funcedit(){
					// 功能设置
					this.dialogTableVisible=true ;
				},
				changeSensorData(){	//修改传感器选择框
					var sensor_id = this.sensor_id;
					cfg.current_edit_obj.attr("sensor_id",sensor_id);
					resetNodeData(sensor_id,'sensor');
				},
				changeVideoData(){	//修改摄像头选择框
					var video_Info = this.video_Info;
					cfg.current_edit_obj.attr("video_Info",video_Info);
					resetNodeData(video_Info);
				},
				jumptype(){
					// 跳转方式变化
					cfg.current_edit_obj.attr("jty", this.jty);
				},
				urlInput(){
					// url 输入变化
					cfg.current_edit_obj.attr("jurl", this.jurl);
				},
				urlInputSelect(){
					// visual_select_code
					cfg.current_edit_obj.attr("jurl", baseurl+"/page/visual/show.html?keyCode=" + this.visual_select_code );
					cfg.current_edit_obj.attr("code",this.visual_select_code  ) ;
				},
				changeNodeData(){	//修改设备选择框
					var node_id = this.node_id;
					cfg.current_edit_obj.attr("node_id",node_id);
					cfg.current_edit_obj.attr("scene_id", this.scene_id);
					resetNodeData(node_id); 
					
					if( this.nid == 1 || this.nid == 5  || this.nid == 8  || this.nid == 9  || this.nid == 10 ){
						this.initSensorList();						
					}
				},
				initSceneList(){
					var that = this ;
					commonAjax('POST', baseurl+'/service/page/scene?paged=1&pageSize=999' , {} ,function (e) {
						if(isOK(e)){
                            var data=e.data.data
                            that.sceneList = data;
                        }else{
                            that.sceneList = [];
                        }
                    }) ;
				},
				initSensorList( val ){	//初始化传感器
					var that = this;
					if( util.isEmpty(that.scene_id) 
							|| util.isEmpty(that.node_id )  ){
						 that.sensorList=[];
						return ;
					}
					commonAjax('POST', baseurl+'/service/page/sensor?paged=1&pageSize=999' , {
                        scene_id: that.scene_id,
                        node_id: that.node_id ,
                        data_type: -1 
                    } ,function (e) {
                    	if(isOK(e)){
                            var data=e.data.data
                            that.sensorList=data;
                            if( val != null  ){
                            	app.sensor_id = val ;
                            }else{
                            	app.sensor_id = '' ;
                            }
                        }else{
                            that.sensorList=[];
                            app.sensor_id = '' ;
                        }
                    }) ;
				},
				initVideoList(){		//初始化摄像头
					var that = this;
					if( util.isEmpty(that.scene_id)  ){
						return ;
					}
					
					commonAjax('POST', baseurl+'/service/page/video?paged=1&pageSize=999' , {
                        scene_id: that.scene_id
                    } ,function (e) {
                    	if(isOK(e)){
                            var data=e.data.data
                            that.videoList=data;
                        }else{
                            that.videoList=[];
                        }
                    }) ;
				},
				initNodeList(){		//初始化设备
					var that = this;
					if( util.isEmpty(that.scene_id) ){
						that.nodeList=[];
						return ;
					}
					
					commonAjax('POST', baseurl+'/service/page/node?paged=1&pageSize=999' , {
                        scene_id: that.scene_id
                    } ,function (e) {
                    	 if(isOK(e)){
                            var data=e.data.data
                            that.nodeList=data;
                        }else{
                            that.nodeList=[];
                        }
                    }) ;
				},
				initUploadImgList(){		//初始图片
					var that = this;
					commonAjax('POST',baseurl+'/service/page/moudle/visual?paged=1&pageSize=1999' , {
                    	moudle_type:1
                    } ,function (e) {
                    	 if(isOK(e)){
                            var data = e.data.data ;
                            that.uploadImgs=data;
                            setTimeout(function(){
								cfg.activeMenuNode($(".upload_img_ele"));
							}, 500); 
                        }else{
                            that.nodeList=[];
                        }
                    }) ;
				},
				imgScale(val){
					if( val == 0 ){
						// 原比例
						cfg.current_edit_obj.children().addClass("normal");
					}else{
						// 缩放
						cfg.current_edit_obj.children().removeClass("normal");
					}
				},
				saveVisual(){		//保存组态
					cfg.removeNodeEvent($(".activeDrag"));
					cfg.groupDel();//删除组合
					this.isdrag = false; 
					var that = this;
					var config = {//系统属性
						zIndexT:cfg.zIndexT
					}
					var param = {
						keycode: keyCode ,
						content:$(navPage).prop("outerHTML"),
						config:JSON.stringify(config)
					}
					if(keyCode == null){
						commonAjax('POST',baseurl+'/service/visual/display' , param ,function (res) {
	                        if(isOk(res)){
	                        	id= res.data.id;
	                        	keyCode = res.data.keycode;
	                            tip("保存成功");
	                        }
	                    }) ;
					} else {
						commonAjax('PUT',baseurl+'/service/visual/display' , param ,function (res) {
	                        if(isOk(res)){
	                        	tip("保存成功");
	                        }
	                    }) ;
					}
				}, 
				showVisual(){	//展示组态
					if( keyCode == null){//
						tip("请先保存后，再进行预览");
						return;
					} else {
						window.open(baseurl+"/page/visual/show.html?keyCode="+keyCode);
					}
				},
				initVisualInfo(){		//初始化组态数据 , 有id  keycode: keyCode ,
					if( keyCode != null){
						var that = this;
		                commonAjax('GET', baseurl+'/service/visual/display?keycode=' + keyCode , "" ,function (e) {
							if(isOK(e)){
	                            var data=e.data;
	                            if(util.isNotEmpty(data.config)){
		                            var config = JSON.parse(data.config);
		                            cfg.zIndexT = config.zIndexT;	                            	
	                            }else{
	                            	cfg.zIndexT = 1 ;
	                            }


	                            that.visual_name = data.name ;
	                            $(navPage).parent().html(data.content);
								// alert(typeof data.content)
								// if(data.content.includes("three.js")){
								// 	that.module.init(data.content);
								// 	that.module.animate();
								// }

	                            cfg.init();
	                            reinitChartObj(); 
	                            that.scene_id = data.scene_id ;
	                            that.changeSceneData();
	                            
	                            var bg = $(".edit-container").attr("bg") ;
	            				if(bg!=null && bg!=''){
	            					 $(".edit-container").parent().css("background-color",bg) ;
	            				}
	                            
	            				var bgurl =  $(".edit-container").attr("bgurl") ;
	        					if( bgurl != null && bgurl != ''){
		            				$(".edit-container").parent().css("background","url("+ bgurl +")  no-repeat ") ;
		            				$(".edit-container").parent().css("background-position","center top") ;
	        					}
	        					
	        					if(data.parent_id == null ){
		        					id = data.id ;	        						
	        					}
	        					
	        					that.initVisualListInfo({id: id}) ;
	        					
	                            if(data.dis_type == 1 && (data.content == null || data.content == '' ) ){
	                            	that.canvensWidth = parseInt( that.canvensHeight/1.7778)  ;
	                            	that.canvensWidthChange();
	                            }
	                            // 根据画布宽高，初始化值
	                            if( data.content!=null && data.content != '' ){
		         					setTimeout( function() {
			     	 					app.canvensHeight = $(".edit-container").height();
			     	 					app.canvensWidth = $(".edit-container").width();
			     					}, 100);	                            	
	                            }
								// that.module.init(data.content);
								// that.module.animate();
	                        } 
	                    }) ;
					}
				},
				initVisualPart(){
					// 获取组件类型
					var that = this;
	                commonAjax('GET', baseurl+'/service/dictionary/130' , "" ,function (res) {
						if(isOK(res)){
                           that.visualPartList = res.data ;
                        } 
                    }) ;
				},
				initVisualListInfo(data){
					var that = this ;
					commonAjax('POST', baseurl+'/service/visual/display/sub/all' , data ,function (res) {
						if(isOK(res)){
                           that.visualList = res.data ;
                        } 
                    }) ;
				},
				clearBgImg(){
// 					$(".edit-container").removeAttr("bgurl") ;
       				$(".edit-container").css("background","") ;
//        				$(".edit-container").parent().css("background-position","") ;
				},
				chartMaxInput(){
					// 输入最大值
					var cl = cfg.current_edit_obj ;
					cl.attr("max" , this.chartMax ) ;
				},
				changeChartColumn(){
					// 增加边框
					var cl = cfg.current_edit_obj ;
					var nid = cl.attr("nid") ;
					var cid = cl.attr("cid") ;
					var optnj = eval("("+  cl.children(".chartStyle").attr("option")  +")");
					if(this.columnVal == 0){
						optnj.series[0].outline.show = false ;
					}else if(this.columnVal == 1){
						optnj.series[0].outline.show = true ;
					}
					setChartOption( getEchartObj() ,optnj) ;
				},
				change3D(){

					this.module.init();
					this.module.animate();
				},
			},created(){
				
			},

			mounted() {


				var that = this;
				$("#app").show();
				setTimeout( function() {
					layer.closeAll();
					$(".guide").show();
				}, 1000);


				this.guide = 1; 
				
				this.initUploadImgList();

				this.initSceneList();
				
				this.initVisualPart();
				this.handleChange();
				
				$(".left-container").height($(window).height()-60);
				$(".element-container").height($(window).height()-80);
				

				this.canvensHeight = $(window).height()-60;
				this.canvensWidth = $(".el-main").width()-240;					
				
				this.canvensWidthChange();
				this.canvensHeightChange();
				$(".el-main, #edit-content-area").height(this.canvensHeight);
				
				$(".el-tabs__content").css("max-height" ,$(window).height()-100 ) ;
				
				// 浏览器尺变化
				/* window.addEventListener('resize', function(){
					$(".left-container").height($(window).height()-60);
					$(".element-container").height($(window).height()-80);
					app.canvensHeight = $(window).height()-80;
					app.canvensWidth = $(".el-main").width()-240;
					app.canvensWidthChange();
					app.canvensHeightChange();
					$(".el-main,#edit-content-area").height(app.canvensHeight);
			    }) */
				
			    // 背景图上传更新
			    initBgImgUpload("upload_img_bg") ;
			    
				// 背景颜色
				initColorSelect("#backcolor",function(color){
					var hexColor = "transparent";
					if(color){ hexColor = color.toRgbString();  }
					if(!$(cfg.current_edit_obj).hasClass("edit-container")){
						$(cfg.current_edit_obj).css("background-color",hexColor); 
					}
				} , function(){});
				
				initColorSelect("#backContainercolor",function(color){
				   	var hexColor = "transparent";
					if( color ){ hexColor = color.toRgbString(); }
					if(cfg.current_edit_obj== null || cfg.current_edit_obj == '' ){
						cfg.current_edit_obj = $(navPage)[0];
					}
					//处理特殊bug , 将背景色放到上一级上
					$(cfg.current_edit_obj).parent().css("background-color",hexColor);
					$(cfg.current_edit_obj).attr("bg",hexColor) ;
				} , function(){} );
				
				initColorSelect("#canvasContainercolor",function(color){
				   	var hexColor = "transparent";
					if( color ){ hexColor = color.toRgbString(); }
					//处理特殊bug , 将背景色放到上一级上
					$(".edit-container").css("background-color",hexColor);
					
				} , function(){} );
				
				//单击素材 
				$(document).delegate(".canvas","click",function(event){
					hideMouseMenu();
					var event = event || window.event; 
					if(event && event.stopPropagation) { 
						event.stopPropagation();    // W3C标准
					}else {  
						event.cancelBubble = true;  //ie678
					}
					if($(this).hasClass("textEditActive") || cfg.inGroup($(this))){
						return;
					}
					$(cfg.current_edit_obj).find(".w-e-text").attr('contenteditable', false) ;
					app.nid = $(this).attr("nid");
					cfg.enterEditStatus($(this)); //进入编辑状态
				})
				
				// 删除数据
				$(document).delegate(".deleteUploadImg","click",function(event){
					var that = $(this) ;
					commonAjax('DELETE', baseurl+'/service/moudle/visual.json?id='+ $(this).attr("id")  , '',function(res){
						if(res.status == 2){
							// 删除成功
							that.parent().parent().parent().remove();
						}
					} );
				});
				//双击素材
				$(document).delegate(".canvas","dblclick",function(event){
					hideMouseMenu();
					var nid = $(this).attr("nid");
					switch (nid) {
						case "3":	//高级文本
							cfg.hideDraggableEvent($(this));	//移除拖动 
							$(this).addClass("textEditActive");
							$(this).find(".w-e-text").attr('contenteditable', true) ;//启动编辑 
							break;
					}
				}) 
				 
				// 编辑区点击 - 转移到鼠标按下事件内
				$(document).delegate(navPage,"click",function(event){ 
					//hideMouseMenu();
					//app.editType = -1 ;
					//cfg.removeNodeEvent($(".activeDrag")); 
					//cfg.enterEditStatus($(this)); //进入编辑状态 
				});
				
				//输入框动态更新旋转角度
				$("#rotate_node").slider({
					range:"max",
					min:0,
					max:360,
					value:0,
					slide:function(event, ui){
						var size = ui.value;
						app.rotate = size;
						var cosVal = Math.cos(size * Math.PI / 180);
						var sinVal = Math.sin(size * Math.PI / 180);
						var valTransform = 'matrix('+ cosVal.toFixed(6) +','+ sinVal.toFixed(6) +','+ (-1 * sinVal).toFixed(6) +','+ cosVal.toFixed(6) +',0,0)';
						$(cfg.current_edit_obj).css("transform","rotate("+size+"deg)");
					}
				});
				//输入框动态更新旋转角度
				$("#rotate_speed").slider({
					range:"max",
					min:0,
					max:360,
					value:0,
					slide:function(event, ui){
						var size = ui.value;
						app.rotate_speed = size;
						resetPipelineChartSpeedAndDir(size);
					}
				});
				// 初始化字体颜色框
				initColorSelect("#basicColor",function(color){
				    var hexColor = "transparent";
					if(color){
						hexColor = color.toRgbString();  
					}
					//处理特殊bug 
					if(!$(cfg.current_edit_obj).hasClass("edit-container")){
						$(cfg.current_edit_obj).css("color",hexColor); 
					}
					// 这里对svg组件，特殊处理
					var cl = cfg.current_edit_obj ;
					var nid = cl.attr("nid") ;
					var cid = cl.attr("cid") ;
					if(nid == 2 && (cid == 8|| cid == 9 )){
						var sc =cl.find("rect,line,circle,g,path,g") ;
						for(var i=0;i<sc.length;i++){
							if(util.isNotEmpty(sc.eq(i).attr("fill"))  && sc.eq(i).attr("fill") != 'none' ){
								sc.eq(i).attr("fill",hexColor);
							}
							if(util.isNotEmpty(sc.eq(i).attr("stroke")) && sc.eq(i).attr("stroke") != 'none'  ){
								sc.eq(i).attr("stroke",hexColor);
							}
						}
					}else if(nid == 5 && cid < 3){
						var optn = cl.children(".chartStyle").attr("option"); 
						var optnj = eval("("+ optn +")");
						$.extend(true, optnj , {
						    xAxis: {
						    	axisLine : {
						    		lineStyle: {
					                    color: hexColor
					                }
					            }
						    },
						    yAxis: {
						    	axisLine : {
						    		lineStyle: {
					                    color: hexColor
					                }
					            }
						    }
						}) ; 
						var chart = getEchartObj();
						setChartOption(chart,optnj) ;
					}else if(nid == 5 && cid == 3){
						var optn = cl.children(".chartStyle").attr("option"); 
						var optnj = eval("("+ optn +")");
						optnj.series[0].axisLabel = {
			                textStyle: {
			                    color: hexColor
			                }
			            } ;
						optnj.series[0].title  = {
			                textStyle: {
			                    color: hexColor
			                }
				        } ;
						var chart = getEchartObj();
						setChartOption(chart,optnj) ;
					}else if(nid == 5 && cid == 4){
						var optn = cl.children(".chartStyle").attr("option"); 
						var optnj = eval("("+ optn +")");
						optnj.series[0].color = ['rgba('+ color._r +', '+ color._g +', '+ color._b +', 0.5)'] ;
						var chart = getEchartObj();
						setChartOption(chart,optnj) ;
					}
				});
				
				/*====================== 自定义右键菜单 ======================*/
				//编辑区 - 转移到鼠标按下事件内
				$(".el-container").on("contextmenu",navPage,function(ev) {
					 return false;  
				});  
				//编辑区 素材
				$(".el-container").on("contextmenu",".canvas",function(ev) {
					if(cfg.inGroup($(this))){//元素在组合内
						return;
					}
					 var oEvent = ev || event; 
					 //自定义的菜单显示
					 hideMouseMenu();
					 var menu = $("#opration");
					 menu.show();
					 //让自定义菜单随鼠标的箭头位置移动
					 menu.css("left",oEvent.clientX + "px");
					 menu.css("top",oEvent.clientY + "px");
					 //素材进入编辑状态
					 var obj = $(this);
					 cfg.enterEditStatus(obj); //进入编辑状态
					 if(obj.attr("nid")==7){//组合的菜单只有删除功能
						 $("#downMoveOne").addClass("item_disabled");
						 $("#downMoveAll").addClass("item_disabled");
						 $("#copyNode").addClass("item_disabled");
						 $("#upMoveOne").addClass("item_disabled");
						 $("#upMoveAll").addClass("item_disabled");
					 }else{
						 $("#downMoveOne").removeClass("item_disabled");
						 $("#downMoveAll").removeClass("item_disabled");
						 $("#copyNode").removeClass("item_disabled");
						 $("#upMoveOne").removeClass("item_disabled");
						 $("#upMoveAll").removeClass("item_disabled");
					 }
					 //是否可以上移下移
					 checkCoincide($(this)); 
					 return false;  
				});
				//禁止页面点击
				document.oncontextmenu = function(){
					return false;
				}
				//隐藏鼠标右键菜单
				function hideMouseMenu(){
					$("#oprationEdit").hide();//隐藏编辑区菜单
					$("#opration").hide();//隐藏素材菜单
				}
				//菜单左对齐
				$(".dir_operate").click(function(){
					changeConAlign(cfg.current_edit_obj,$(this).attr("tag"));
					hideMouseMenu();
				})
				//菜单复制 
				$("#copyNode").click(function(){
					if($(this).hasClass("item_disabled")){//禁止点击
						return;
					}
					cfg.clone_obj = $(cfg.current_edit_obj)[0];
					hideMouseMenu();
				})
				//菜单下移一层
				$("#downMoveOne").click(function(){
					if($(this).hasClass("item_disabled")){//没有粘贴对象
						return;
					}
					changeNodeIndex(cfg.current_edit_obj,"down");
					checkCoincide(cfg.current_edit_obj); 
				})
				//菜单下移底层
				$("#downMoveAll").click(function(){
					if($(this).hasClass("item_disabled")){//没有粘贴对象
						return; 
					}
					changeNodeIndex(cfg.current_edit_obj,"down",true);
					checkCoincide(cfg.current_edit_obj); 
				})
				//菜单上移一层
				$("#upMoveOne").click(function(){
					if($(this).hasClass("item_disabled")){//没有粘贴对象
						return;
					}  
					changeNodeIndex(cfg.current_edit_obj,"up");
					checkCoincide(cfg.current_edit_obj);  
				})
				//菜单上移顶层
				$("#upMoveAll").click(function(){
					if($(this).hasClass("item_disabled")){//没有粘贴对象
						return;
					}  
					changeNodeIndex(cfg.current_edit_obj,"up",true);
					checkCoincide(cfg.current_edit_obj);  
				})
				//菜单粘贴
				$("#pasteNode").click(function(){
					if($(this).hasClass("item_disabled")){//没有粘贴对象
						return;
					}
					var x1 = $(this).offset().top;
					var y1 = $(this).offset().left;
					var x2 = $(navPage).offset().top;
					var y2 = $(navPage).offset().left;
					var obj = $(cfg.clone_obj).clone();
					if($(cfg.clone_obj).attr("nid") == 3){
						// 复制高级文本
						var obj = $(".high-txt").clone();
					}
					obj.appendTo($(navPage));//进入编辑区
					obj.removeClass("high-txt");
					cfg.generateNewNode(obj,{
						"top":x1-x2+"px",
						"left":y1-y2+"px"
					});  
					cfg.enterEditStatus(obj); //进入编辑状态
					hideMouseMenu()
				})
				//菜单删除
				$("#deleteNode").click(function(){
					if( util.isNotEmpty( cfg.current_edit_obj ) && !cfg.current_edit_obj.hasClass("edit-container")){
						cfg.current_edit_obj.remove(); 
						hideMouseMenu();
					}
				})
				//键盘监听
				$(document).keydown(function(event){
					var key = event.keyCode;
					if(key=="46"){
						$("#deleteNode").click(); 
					}
				});
				//拖动选中元素事件
				$(document).on('mousedown', navPage, function(eventDown){
					var key =  eventDown.which; //获取鼠标键位  
					if(key == 1){  //如果鼠标左键按下
						var target = $(eventDown.target);
						//如果有选中区域。未进行组合则删除
						if($(navPage).find(".tempGroup").length != 0){
							if(target.closest(".tempGroup").length == 0){
								cfg.groupDel();
							}
						}
						hideMouseMenu();
						if(target.closest(".canvas").length == 0){
							app.editType = -1 ;
							cfg.removeNodeEvent($(".activeDrag")); 
						}
						//判断点击相关素材不可执行
						if(target.closest(".canvas").not(".Locking").length == 0){
							//  创建选框节点
							var $selectBoxDashed = $('<div class="selectBox" id="selectBox"></div>');
							$("body").append($selectBoxDashed);
							// 设置选框的初始位置
							var startX = eventDown.pageX || eventDown.offsetX;
							var startY = eventDown.pageY || eventDown.offsetY;
							$selectBoxDashed.css
							({
								left: startX,
								top : startY
							});
							//根据鼠标移动，设置选框宽高
							var __x = null;
							var __y = null;
							//监听鼠标移动事件
							$(document).on('mousemove', function(eventMove){
								//根据鼠标移动，设置选框的位置、宽高
								__x = eventMove.pageX || eventMove.offsetX;
								__y = eventMove.pageY || eventMove.offsetY;
								// 暂存选框的位置及宽高，用于将 选中
								var __left   = Math.max(__x, startX);
								var minLeft  = Math.min(__x, startX);
								var __top    = Math.max(__y, startY);
								var minTop   = Math.min(__y, startY);
								var __width  = Math.abs(__x - startX);
								var __height = Math.abs(__y - startY);
								$selectBoxDashed.css(
								{
									left  : minLeft,
									top   : minTop,
									width : __width,
									height: __height
								});
								//  遍历容器中的选项，进行选中操作
								$(navPage+ "> .canvas").removeClass('is-selected');
								$(navPage+ "> .canvas").not(".Locking").each(function()
								{
									var $item = $(this);
									var itemX_pos = $item.prop('offsetWidth') + $item.offset().left;
									var itemY_pos = $item.prop('offsetHeight') + $item.offset().top;
									//判断添加以及删除
									var condition1 = itemX_pos <= __left;
									var condition2 = itemY_pos <= __top;			
									var condition3 = $item.offset().left >= minLeft;
									var condition4 = $item.offset().top  >= minTop;
									if(condition1 && condition2 && condition3 && condition4)
									{
										$item.addClass('is-selected');
									}else
									{
										$item.removeClass('is-selected');
									}
								});
							});
							$("body").one('mouseup', function(){
								cfg.current_edit_obj = null ;
								app.editType = -1 ;
								app.nid = -1 ;
								//鼠标按键抬起删除鼠标移动事件
								$(document).off('mousemove');
								$selectBoxDashed.remove();
								var shu = $(navPage).children(".is-selected").length;
								if(shu > 1)
								{
									//预添加组合
									var arrayGroup = [];
									var kLeft = $(navPage).offset().left -1;
									var kTop  =  $(navPage).offset().top -1;
									$(navPage).children(".is-selected").each(function(index)
									{
										var offset = $(this).offset();
										var Nheight = $(this).height();
										var Nwidth  = $(this).width();
										var NTop    = offset.top - kTop;
										var Nleft   = offset.left - kLeft;
										arrayGroup.push([Nleft,NTop,Nwidth,Nheight]);
										if((index+1) == shu)
										{
											$(navPage).children(".is-selected").wrapAll('<div class="canvas tempGroup canvasId" nid="7" Lid="0"><div class="canvas-con"></div></div>');//添加组合前
											var minLeft  = -1;//获取最小left偏移量
											var minTop   = -1;//计算top偏移量和高
											var maxWidth = [];//计算宽度
											var maxHeight= [];//计算高度
											for (var LT = 0; LT < arrayGroup.length; LT++) 
											{
												//获取最小left
												if (minLeft > arrayGroup[LT][0] || minLeft === -1) 
												{
													minLeft = arrayGroup[LT][0];
												}
												//获取最小top
												if (minTop > arrayGroup[LT][1] || minTop === -1) 
												{
													minTop = arrayGroup[LT][1];
												}
												//计算宽高
												if((LT+1) == arrayGroup.length)
												{
													//计算宽
													for (var W = 0; W < arrayGroup.length; W++) 
													{
														var wid =(arrayGroup[W][0] + arrayGroup[W][2]) - minLeft;
														maxWidth.push(wid);
													}
													//计算高
													for (var H = 0; H < arrayGroup.length; H++) 
													{
														var hei =(arrayGroup[H][1] + arrayGroup[H][3]) - minTop;
														maxHeight.push(hei);
													}
												}
											}	
											var MaxW = (Math.max.apply(null, maxWidth));
											var MaxH = (Math.max.apply(null, maxHeight));
											//布局
											var Width   = MaxW;//parseInt(MaxW);
											var newLeft = minLeft;//parseInt(minLeft);
											var height  = MaxH;//parseInt(MaxH);
											var newTop  = minTop;//parseInt(minTop);
											var zIndexT  = cfg.zIndexT;
											cfg.zIndexT = zIndexT+1;
											$(navPage+ "> .tempGroup").css(
											{
												"top":newTop,
												"left":newLeft,
												"width":Width,
												"height":height,
												"z-index":zIndexT,
											});
											//初始化拖动
											cfg.activeCommonNode($(navPage+ "> .tempGroup"));
											/*从新计算选中元素宽高*/
											$(navPage+ "> .tempGroup").find(".is-selected").each(function(index)
											{
												if(index == 0)
												{
													$(this).addClass("Equal");
												}
												var thisTop = $(this).css("top").replace(/[a-z]/g,"");
												var thisLeft = $(this).css("left").replace(/[a-z]/g,"");
												var Top  = Number(thisTop) - Number(newTop) + "px";
												var Left = Number(thisLeft) - Number(newLeft) + "px";
												$(this).css({"top":Top,"left":Left});
												$(this).addClass("resiz_canvas");
												$(this).removeClass("is-selected");
												//$(this).draggable("destroy");//禁止拖动
											});
											//有时候会出现选中全页面文字。
											$(".el-container").focus();
											$(".el-container").click();
										}
									});
								}
							});
						}
					} else if(key == 3){
						var oEvent = eventDown || event; 
						 //自定义的菜单显示
						 hideMouseMenu();
						 //如果存在可粘贴对象则可粘贴
						 if(cfg.clone_obj!=null && cfg.clone_obj!= '' ){
							 $("#pasteNode").removeClass("item_disabled");
						 }else{
							 return false ;
						 }
						 var menu = $("#oprationEdit");
						 menu.show();
						 $("#opration").hide();//隐藏另一个菜单
						 //让自定义菜单随鼠标的箭头位置移动
						 menu.css("left",oEvent.clientX + "px");
						 menu.css("top",oEvent.clientY + "px");
						 cfg.removeNodeEvent($(".activeDrag")); 
					}
				});
				//检查是否存在重合  比当前素材优先级高的
				function checkCoincide(obj){
					var left = obj.prop('offsetLeft');
					var top = obj.prop('offsetTop');
					var width = obj.prop('offsetWidth');
					var height = obj.prop("offsetHeight");
					var zIndex = obj.css("z-index");
					var up_flag = false;//可以上移
					var down_flag = false;//可以下移
					//除了当前选择素材之外的素材 有没有重合的
					$(".canvas").not(".activeDrag").each(function(){
						var zIndexO = $(this).css("z-index");
						var leftO = $(this).prop('offsetLeft');
						var topO = $(this).prop('offsetTop');
						var widthO = $(this).prop('offsetWidth');
						var heightO = $(this).prop("offsetHeight");
						var conditionL = leftO+widthO<left;//左边
						var conditionT = topO+heightO<top;//上面
						var conditionR = leftO>left+width;//右边
						var conditionB = topO>top+height;//下面
						if(conditionL||conditionT||conditionR||conditionB){//没有重合
						} else {//重合
							if(zIndexO>zIndex){
								down_flag = true;
							} else if(zIndexO<zIndex){
								up_flag = true;
							}
						} 
					})
					if(down_flag){
						$("#upMoveOne").removeClass("item_disabled");
						$("#upMoveAll").removeClass("item_disabled");
					} else { 
						$("#upMoveOne").addClass("item_disabled");
						$("#upMoveAll").addClass("item_disabled");
					}
					if(up_flag){ 
						$("#downMoveOne").removeClass("item_disabled");
						$("#downMoveAll").removeClass("item_disabled");
					} else {
						$("#downMoveOne").addClass("item_disabled");
						$("#downMoveAll").addClass("item_disabled");
					}
				}
				//改变元素层级  type:1、up 上移 2、down 下移 ，isMax  是否到最底或者最顶层    true为是
				function changeNodeIndex(obj,type,isMax){
					var left = obj.prop('offsetLeft');
					var top = obj.prop('offsetTop');
					var width = obj.prop('offsetWidth');
					var height = obj.prop("offsetHeight");
					var zIndex = obj.css("z-index");
					var up_arr = new Array();//可以上移
					var down_arr = new Array();//可以下移
					//除了当前选择素材之外的素材 有没有重合的
					$(".canvas").not(".activeDrag").each(function(){
						var zIndexO = $(this).css("z-index");
						var leftO = $(this).prop('offsetLeft');
						var topO = $(this).prop('offsetTop');
						var widthO = $(this).prop('offsetWidth');
						var heightO = $(this).prop("offsetHeight");
						var conditionL = leftO+widthO<left;//左边
						var conditionT = topO+heightO<top;//上面
						var conditionR = leftO>left+width;//右边
						var conditionB = topO>top+height;//下面 
						if(conditionL||conditionT||conditionR||conditionB){//没有重合 
							;
						} else {//重合
							if(zIndexO>zIndex){
								var sub = [zIndexO,$(this)];
								up_arr.push(sub);
							} else if(zIndexO<zIndex){
								var sub = [zIndexO,$(this)];
								down_arr.push(sub);
							}
						} 
					}) 
					if(type=="up"){
						var arrayObj=up_arr;
						arrayObj.sort(function(a,b){
							return a[0].localeCompare(b[0])
						}) 
						if(isMax==true){//自己置为最大，比原来的自己大的-1
							var own_index = parseInt(obj.css("z-index"));
							var max_index = arrayObj[arrayObj.length-1][0];
							obj.css("z-index",max_index);
							$(".canvas").not(".activeDrag").each(function(){
								var index = parseInt($(this).css("z-index"));
								if(index>own_index){
									$(this).css("z-index",index-1);
								}
							})
						} else {
							var tempIndex;
							var tempObj;
							tempIndex = arrayObj[0][0];
							tempObj = arrayObj[0][1];
							obj.css("z-index",tempIndex);
							tempObj.css("z-index",zIndex);
						}
					} else if (type=="down") { 
						var arrayObj=down_arr; 
						var tt = arrayObj.sort(function(a,b){
							return b[0].localeCompare(a[0])
						}) 
						if(isMax==true){//自己置为1，比原来的自己大的+1
							var own_index = parseInt(obj.css("z-index"));
							//var max_index = arrayObj[arrayObj.length-1][0];
							obj.css("z-index",1);
							$(".canvas").not(".activeDrag").each(function(){
								var index = parseInt($(this).css("z-index"));
								if(index<own_index){
									$(this).css("z-index",index+1);
								}
							})
						} else { 
							var tempIndex;
							var tempObj;  
							tempIndex = arrayObj[0][0];
							tempObj = arrayObj[0][1];
							obj.css("z-index",tempIndex);
							tempObj.css("z-index",zIndex);
						}
					} 
				} 
				//改变组合框内元素方向
				function changeConAlign(obj,dir){
					var canvas = obj.find(".canvas");
					if(dir==0){  
						canvas.css("top",0);
						canvas.css("bottom",'');
					} else if(dir==1){//left组合框宽度减去元素自身宽度
						var w = obj.width();
						for (var i = 0; i < canvas.length; i++) {
							var canva = canvas[i]; 
							$(canva).css("left",w-$(canva).width()+"px");
						}
					} else if(dir==2){   
						var h = obj.height(); 
						for (var i = 0; i < canvas.length; i++) {
							var canva = canvas[i]; 
							$(canva).css("top",h-$(canva).height()+"px");
						}   
					} else if(dir==3){  
						canvas.css("left",0);
						canvas.css("right",'');
					} 
				}
				that.initVisualInfo();

			}
    	})
    </script>

</html>
